Responsive 2-Spalten-Quadrate in CSS

Question

Ich versuche, eine reaktionsfähige Seite mit Quadraten zu erstellen, die 50% der vollen Breite (2 Quadrate pro Zeile) nehmen. Auf Mobile (einschließlich iPhone 6/7 Plus), sollten diese Quadrate untereinander sein, aber das ist, wo es nicht mit dem folgenden Code arbeiten:

.square { 
    width: 100vw; 
    height: 100vw; 
    float: left; 
} 

@media (min-width: 1170px) { 
    .square {width: 50vw; height: 50vw; } 
} 

Idealerweise würde ich Bootstrap verwenden, aber ich kann nicht verstehen, wie man Quadrate erstellen.

Answer 1

Bootstrap Beispiel:

<div class="container"> 
    <div class="row"> 
    <div class="col-lg-6"> 
     <div class="square"></div> 
    </div> 
    <div class="col-lg-6"> 
     <div class="square"></div> 
    </div> 
    </div> 
</div> 

CSS:

.square { 
    height: 0; 
    padding-bottom: 100%; 
    background-color: green; 
} 

http://codepen.io/Deka87/pen/yMrmKK

Answer 2

Sind Sie auf der Suche nach so etwas? https://jsfiddle.net/5xc8fs0a/

Es nutzt die Tatsache, dass der Prozentsatz der Füllung auf der Breite basiert, so dass padding-bottom: 100% sicherstellt, dass Höhe und Breite genau gleich sind.

.square { 
    float: left; 
    width: 48%; 
    margin-right: 1%; 
    background: red; 
} 

.square:after { 
    content: ''; 
    display: inline-block; 
    height: 0; 
    padding-bottom: 100%; 
}