Zwei divs 50% Breite als Quadrate

Question

Wie kann ich zwei div s wie diese machen?

• Wenn die Grauzone klein wird, die beide div s halten das Aussehen.

• In der roten Box kann ich box-sizing: border-box; und padding: 50% 0; verwenden, aber in der blauen Box muss ich Text eingeben.

.c { 
 
    padding: 10px; 
 
    background-color: gray; 
 
    overflow: auto; 
 
    margin: 0 0 10px 0; 
 
} 
 
.c1 { 
 
    width: 300px; 
 
} 
 
.c2 { 
 
    width: 200px; 
 
} 
 
.w { 
 
    width: 100%; 
 
} 
 
.w div { 
 
    float: left; 
 
} 
 
.i { 
 
    width: 50%; 
 
    height: 50px; 
 
    background-color: red; 
 
} 
 
.t { 
 
    width: 50%; 
 
    height: 50px; 
 
    background-color: blue; 
 
}

<div class="c c1"> 
 
    <div class="w"> 
 
    <div class="i"></div> 
 
    <div class="t"></div> 
 
    </div> 
 
</div> 
 
<div class="c c2"> 
 
    <div class="w"> 
 
    <div class="i"></div> 
 
    <div class="t"></div> 
 
    </div> 
 
</div>

Answer 1

So etwas wie das?

.square { 
 
    box-sizing: border-box; 
 
    padding: 50% 50% 0 0; 
 
    width: 50%; 
 
    float: left; 
 
    position: relative; 
 
} 
 
.image { 
 
    background: red; 
 
} 
 
.text { 
 
    background: blue; 
 
} 
 
.text > div { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    text-align: center; 
 
    color: white; 
 
    padding: 50% 0; 
 
    line-height: 0; 
 
    text-transform: uppercase; 
 
}

<div class="wrap"> 
 
    <div class="square image"></div> 
 
    <div class="square text"> 
 
    <div>text</div> 
 
    </div> 
 
</div>

Answer 2

Sie die gleiche 50vwwidth und height für jedes Element sowohl für die zur Herstellung der Quadrate einstellen. Dann verwenden Sie flex, float oder inline-block sowieso Sie wollen sie nebeneinander legen.

jsFiddle

.container { 
 
    display: flex; 
 
} 
 
.item { 
 
    width: 50vw; 
 
    height: 50vw; 
 
} 
 
.image { 
 
    background: url("https://unsplash.it/800/800?random") center/cover; 
 
} 
 
.text { 
 
    background-color: pink; 
 
    
 
    /*center the text*/ 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<div class="container"> 
 
    <div class="item image"></div> 
 
    <div class="item text">Text</div> 
 
</div>

Answer 3

.square{ 
 
    width: 50%; 
 
    
 
    position: relative; 
 
    float: left; 
 
} 
 
.square:before{ 
 
    content: '\0020'; 
 
    padding-top: 100%; 
 
    
 
    display: block; 
 
} 
 
.boxer{ 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 
#c1{ 
 
    background: salmon; 
 
} 
 
#c2{ 
 
    background: lightblue; 
 
} 
 
#image{ 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
.centered{ 
 
    position: absolute; 
 
    
 
    top: 50%; 
 
    left: 50%; 
 
    
 
    text-align: center; 
 
    
 
    -webkit-transform: -webkit-translate(-50%, -50%); 
 
     -moz-transform: -moz-translate(-50%, -50%); 
 
      transform:   translate(-50%, -50%); 
 
    
 
}

<div id="container"> 
 
    <div class="square"> 
 
     <div class="boxer" id="c1"> 
 
      <img id="image" src="https://www.archlinux.org/static/vector_tux.864e6cdcc23e.png"/> 
 
     </div> 
 
    </div> 
 
    <div class="square"> 
 
     <div class="boxer" id="c2"> 
 
      <p class="centered"> 
 
      You can put your text here! 
 
      I you don't like to have it centered, 
 
      remove class centered! 
 
      </p> 
 
     </div> 
 
    </div> 
 
</div>