2個相同高度的盒子（百分比）

Question

如何創建兩個相同高度的盒子（並排浮動）。 我想創建容器/窗口的40％高度的框？

Answer 1

See the Example Here

---

如果這是你所尋找的，這裏更多：

CSS：

#parent{ 
    width:205px; 
    height:200px; 
    border:1px solid #000000; 
    overflow:auto; 
    } 

    #child1{ 
    height:40%; 
    background:#00ff00; 
    float:left; 
    } 

    #child2{ 
    height:40%; 
    background:#0000ff; 
    float:left; 
    } 

要點：

• 的float:left用來對準兩個箱子並排側
• 的height在%兩個孩子箱指定讓他們從他們的父母繼承。

HTML：

<div id="parent"> 
    <div id="child1"> 
     This is first box 
    </div> 
    <div id="child2"> 
     This is second box 
    </div> 
    </div> 

Answer 2

使用％作爲高度是相對於父容器的高度。因此您需要聲明父容器的高度。看看這個教程：Equal Height Columns。

Answer 3

這應該是你一個簡單的解決方案。這是我的例子：

jsfiddle

HTML：

<div class="wrap"> 
    <div class="left"> 
     Content 
    </div> 
    <div class="right"> 
     More content 
    </div> 
</div> 

CSS：

.wrap 
{ 
    width: 400px; 
    height: 500px; 
    border: 1px solid #000; 
} 

.left, .right 
{ 
    float: left; 
    width: 45%;a 
    height: 40%; 
    margin: 2%; 
} 

.left 
{ 
    border: 1px solid #f00; 
} 

.right 
{ 
    border: 1px solid #00f; 
} 
​ 

Answer 4

問題特別提到浮動，也有過了幾個很好的答案，但我認爲如果提及浮動是偶然的，則可能值得發帖an answer that doesn't use floats：

.wrapper { 
    width: 400px; 
    height: 400px; 
    outline: 1px solid #000; 
} 
.wrapper div { 
    display: inline-block; 
    width: 198px; 
    height: 40%; 
    background: #66c; 
} 
.wrapper div:first-child { 
    background: #6c6; 
} 

<div class="wrapper"> 
    <div>This is the first box</div> 
    <div>This is the second box</div> 
    <p>Some other content</p> 
</div> 

它目前不在WebKit中工作，但我認爲這是一個錯誤，並且會有一個解決方法，我正在調查。如果你需要在IE <工作8添加條件註釋：

<!--[if lt IE 8]> 
<style> 
    .wrapper div { zoom:1; *display:inline;} 
</style> 
<![endif]-->