百分比高度的div結構

我試圖在頁面上構建特定的結構。百分比高度的div結構

具有400px高度的主div（.row），兩個子div（列col-md-6）和五個內部div：兩個具有父高度的50％，三個具有父高度的33％。我不知道如何實現這一點。你能推薦最好的解決方案嗎？

P.S.我正在使用bootstrap3。

更新：增加了代碼。

<div class="row"> 
    <div class="col-md-6"> 
    <div id="ember828" class="ember-view bar-category-box"> 
    </div> 
    <div id="ember829" class="ember-view bar-category-box"> 
    </div> 
    </div> 
    <div class="col-md-6"> 
    <div id="ember830" class="ember-view bar-category-box"> 
    </div> 
    <div id="ember831" class="ember-view bar-category-box"> 
    </div> 
    <div id="ember832" class="ember-view bar-category-box"> 
    </div> 
    </div> 
</div>

來源

2016-01-31 Crabar

請張貼的HTML/CSS你有這麼遠。 – LGSon

您可以Flexbox的做到這一點，或者與引導相結合，並實現Flexbox DEMO

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    height: 400px; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    display: flex; 
 
    border: 1px solid #73FCD6; 
 
    padding: 10px; 
 
} 
 

 
.left, .right { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
} 
 

 
.box { 
 
    border: 1px solid #965504; 
 
    flex: 1; 
 
    margin: 5px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    <div class="box">Content</div> 
 
    <div class="box">Content</div> 
 
    </div> 
 
    
 
    <div class="right"> 
 
    <div class="box">Content</div> 
 
    <div class="box">Content</div> 
 
    <div class="box">Content</div> 
 
    </div> 
 
</div>

來源

2016-01-31 09:18:48

他不需要。 –

我有一個想法，它可以用bootstrap解決，所以我添加了該標籤。 – Crabar

在這個主題中有一個更簡短的答案適合我。你能解釋一般使用flexbox還是僅僅在我的情況下有什麼好處？你的片段也看起來正是我想要的。 – Crabar

由於.row固定爲400像素，高度，你能給什麼相同的高度內：

.row > .col-md-6 { 
    height: 100%; 
}

然後爲每個裏面的div .COL-MD-6，你給你所需要的高度：

.row > .col-md-6 .half { 
    height: 50%; 
} 
.row > .col-md-6 .third { 
    height: 33.33%; 
}

這應該有效。即使父母的.row div高度改變了，內部也應該適應。

來源

2016-01-31 09:07:48

看起來像是有效的。謝謝。 – Crabar

百分比高度的div結構

回答

相關問題