如何定位一個塊由兩個塊組成的兩個文本塊？

Question

在這裏，紅色和黑色是與藍色相同寬度的兩個文本塊，但是在一起，兩個塊都具有與藍色相同的高度。 目前，我有。

Answer 1

這是一種使用嵌套的flexbox layout的現代方法。不幸的是，它需要一些額外的標記（容器div），但是在寬度和高度方面非常靈活，這與其他方法很難實現。您需要使用flex值（flex-grow，flex-shrink，flex-base）來獲得您想要的結果。它的表現非常像表格單元格。

圍繞柔性盒包裝頭部的好起點是this nice overview。黑色容器上的高度只是爲了演示，這些元素可以很好地適應您想要的每個尺寸。請注意，儘管沒有聲明高度，但右側會展開爲相同的大小。

div{padding:5px;} 
 

 
#container{ 
 
    border:1px solid red; 
 
    display:flex; 
 
    align-items:stretch; 
 
} 
 
#container > div{ 
 
    flex:1 1 auto; 
 
} 
 
#left{ 
 
    display:flex; 
 
    flex-direction:column; 
 
    border:1px solid blue; 
 
} 
 
#left > div{ 
 
    flex:1 1 auto; 
 
} 
 
#red{background-color:red;} 
 
#black{background-color:black;color:white;height:100px;} 
 
#right{ 
 
    background:#aaf; 
 
}

<div id="container"> 
 
    <div id="left"> 
 
    <div id="red"> 
 
    red container 
 
    </div> 
 
    <div id="black"> 
 
     black container 
 
     
 
    </div> 
 
    </div> 
 
    
 
    <div id="right"> 
 
    right 
 
    <br> 
 
    side 
 
    </div> 
 
</div>

Answer 2

我認爲您正在尋找類似於我創建HERE的示例。

HTML：

<div class="two"> 
    <div id="red">red div</div> 
    <div id="black">black div</div> 
</div> 
<div class="one"> 
    <div id="blue">blue div</div> 
</div> 

CSS：

* {box-sizing:border-box;} 
.two { 
    width: 48%; 
    margin: 0 1%; 
    float: left; 
} 
.one { 
    width: 48%; 
    float: left; 
} 
#red { 
    background: red; 
    height: 30px; 
    margin-bottom: 2px; 
    border: 1px solid black; 
    color: white; 
    overflow: auto; 
} 
#black { 
    background: black; 
    height: 30px; 
    border: 1px solid black; 
    color: white; 
    overflow: auto; 
} 
#blue { 
    background: #CFE2F3; 
    height: 62px; 
    border: 1px solid black; 
} 

在這個例子中，紅色和黑色文本框具有相同的高度和寬度，但他們坐在在彼此的頂部上。藍色框的寬度與前兩個框的寬度相同，但其高度是紅色框的高度的兩倍。