爲divs組設置相等的高度

Question

在一個部分中，我有4個div。當前浮動到左邊的第一個div的寬度和高度均以像素爲單位。我想要的是根據其他div的高度動態生成高度。我很困難。這裏是我的jsfiddle： https://jsfiddle.net/ksaluja/62o7ydan/謝謝！

<section> 
<div class="attempt"> 

</div> 
<div> 
    <ul id="menu"> 
     <li><a style="background:#3F4E64" href="/html/default.asp">Button1</a></li> 
     <li><a style="background:#788291">Button2</a></li> 
    </ul> 
</div> 

<div> 
    <H2>TITLE</H2> 
    <p> 
     BADKADA 
    </p> 
    <p> 
     Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium 
    </p> 
    <p> 
     Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium 
    </p> 

    <p> 
     Fusce luctus Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium fring. 
    </p> 
</div> 

<div> 
    <H2>TITLE2</H2> 
    <p> 
     BADKADA 
    </p> 
    <p> 
     Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium 
    </p> 
    <p> 
     Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium 
    </p> 

    <p> 
     Fusce luctus Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium fring. 
    </p> 
</div> 
</section> 

CSS

.attempt { 
    float:left; 
    width: 15px; 
    height: 1290px; 
    background: #3F4E64; 
    margin-right:20px; 
} 

Answer 1

您可以使用CSS flexbox來實現此佈局。

使section爲flex容器，它將div轉換爲flex項目。

但將最後三個div包裝在嵌套的柔性容器中。現在section有兩個彈性物品，並排和共享相同的高度。沒有漂浮或宣佈的高度必要。每列將跟蹤另一列。內容較高的列設置兩者的高度。

CSS

.outer-flex-container { 
    display: flex; 
} 

.attempt { 
    width: 15px; 
    background: #3F4E64; 
    margin-right: 20px; 
} 

HTML

<section class="outer-flex-container"> 

    <div class="attempt"></div><!-- flex item #1 --> 

    <section class="inner-flex-container"><!-- flex item #2 --> 
     <div> 
      <ul id="menu"> 
       <li><a style="background:#3F4E64" href="/html/default.asp">Button1</a></li> 
       <li><a style="background:#788291">Button2</a></li> 
      </ul> 
     </div> 

     <div> 
      <H2>TITLE</H2> 
      <p>BADKADA</p> 
      <p>Fusce luctus ipsum in dui accumsan...</p> 
      <p>Fusce luctus ipsum in dui accumsan...</p> 
      <p>Fusce luctus Fusce luctus ipsum in...</p> 
     </div> 

     <div> 
      <H2>TITLE</H2> 
      <p>BADKADA</p> 
      <p>Fusce luctus ipsum in dui accumsan...</p> 
      <p>Fusce luctus ipsum in dui accumsan...</p> 
      <p>Fusce luctus Fusce luctus ipsum in...</p> 
     </div> 
    </section><!-- END .inner-flex-container --> 

</section><!-- END .outer-flex-container --> 

Revised Demo

---

瞭解更多關於等高柱與Flexbox的位置：

• Here's how to achieve equal height columns with flexbox
• How to disable equal height columns in Flexbox

---

注意Flexbox將被所有主流瀏覽器，支持except IE 8 & 9。一些最新的瀏覽器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前綴，請使用Autoprefixer。 this answer中的更多瀏覽器兼容性詳細信息。

Answer 2

If you're able to use them，柔性盒讓事情你要容易得多。您可以製作sectiondisplay: flex，並將右側列的內容全部移動到同一個容器中。 CSS是這樣的：

section { 
    display: flex; 
} 

.attempt { 
    width: 15px; 
    background: #3F4E64; 
    margin-right:20px; 
} 

...和HTML：

<section> 
    <div class="attempt">...</div> 
    <div>The rest of the content...</div> 
</section> 

這裏是一個demonstration JSFiddle。

Answer 3

你可以通過設置display:table爲section和display:table-cell兩個div的裏面（即.attempts DIV和它的兄弟姐妹）實現這一目標。使用這個你不需要設置浮點或高度。

DEMO

CSS：

section { 
    display: table; 
} 
.attempt { 
    display:table-cell; 
    width: 15px;  
    background: #3F4E64; 
    margin-right:20px; 
} 
section div{ 
    display:table-cell; 
}