如何使浮動的DIV占據其容器的水平空間？

Question

這就是我所說的：

 #row { border: solid blue; overflow: hidden; } .cell { float: left; width: 33.333%; height: 100%; border: solid pink; box-sizing: border-box; } 

 <div id="row"> <div class="cell"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur tincidunt sapien, sed hendrerit metus pharetra et. Mauris nec turpis faucibus, mattis purus sed, tempus risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus rutrum luctus dapibus. Integer sed sodales sem, quis accumsan augue. Mauris non augue dignissim, vestibulum risus nec, convallis augue. Integer quis elit et nisl facilisis pellentesque sit amet at dui. Maecenas vitae nisl congue, ornare turpis in, malesuada sem. In eu eleifend nulla. Donec est tellus, tincidunt volutpat eleifend vel, pellentesque et leo. Maecenas purus justo, scelerisque blandit ultrices non, facilisis id diam. Sed gravida tincidunt nunc ut sollicitudin. </div> <div class="cell"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur tincidunt sapien, sed hendrerit metus pharetra et. Mauris nec turpis faucibus, mattis purus sed, tempus risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div> <div class="cell"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur tincidunt sapien, sed hendrerit metus pharetra et. Mauris nec turpis faucibus, mattis purus sed, tempus risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus rutrum luctus dapibus. Integer sed sodales sem, quis accumsan augue. Mauris non augue dignissim, vestibulum risus nec, convallis augue. Integer quis elit et nisl facilisis pellentesque sit amet at dui. </div> </div> 

我想粉紅色的細胞來填滿行DIV的 水平 垂直空間。 如果我不將它們漂浮在左邊，他們會這樣做，但我需要它們在整行上均勻分布。 這是我實際代碼的簡化，但這是我面臨的問題。

Answer 1

使用display: table-cell並從具有類.cell元素中刪除float: left ：

 #row { border: solid blue; overflow: hidden; } .cell { display: table-cell; width: 33.333%; height: 100%; border: solid pink; box-sizing: border-box; } 

 <div id="row"> <div class="cell"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur tincidunt sapien, sed hendrerit metus pharetra et. Mauris nec turpis faucibus, mattis purus sed, tempus risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus rutrum luctus dapibus. Integer sed sodales sem, quis accumsan augue. Mauris non augue dignissim, vestibulum risus nec, convallis augue. Integer quis elit et nisl facilisis pellentesque sit amet at dui. Maecenas vitae nisl congue, ornare turpis in, malesuada sem. In eu eleifend nulla. Donec est tellus, tincidunt volutpat eleifend vel, pellentesque et leo. Maecenas purus justo, scelerisque blandit ultrices non, facilisis id diam. Sed gravida tincidunt nunc ut sollicitudin. </div> <div class="cell"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur tincidunt sapien, sed hendrerit metus pharetra et. Mauris nec turpis faucibus, mattis purus sed, tempus risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div> <div class="cell"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur tincidunt sapien, sed hendrerit metus pharetra et. Mauris nec turpis faucibus, mattis purus sed, tempus risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus rutrum luctus dapibus. Integer sed sodales sem, quis accumsan augue. Mauris non augue dignissim, vestibulum risus nec, convallis augue. Integer quis elit et nisl facilisis pellentesque sit amet at dui. </div> </div> 

Answer 2

而不是浮動，而是使用display:table-cell ：

 #row { border: solid blue; overflow: hidden; } .cell { display: table-cell; width: 33.333%; height: 100%; border: solid pink; box-sizing: border-box; } 

 <div id="row"> <div class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur tincidunt sapien, sed hendrerit metus pharetra et. Mauris nec turpis faucibus, mattis purus sed, tempus risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus rutrum luctus dapibus. Integer sed sodales sem, quis accumsan augue. Mauris non augue dignissim, vestibulum risus nec, convallis augue. Integer quis elit et nisl facilisis pellentesque sit amet at dui. Maecenas vitae nisl congue, ornare turpis in, malesuada sem. In eu eleifend nulla. Donec est tellus, tincidunt volutpat eleifend vel, pellentesque et leo. Maecenas purus justo, scelerisque blandit ultrices non, facilisis id diam. Sed gravida tincidunt nunc ut sollicitudin.</div> <div class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur tincidunt sapien, sed hendrerit metus pharetra et. Mauris nec turpis faucibus, mattis purus sed, tempus risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div> <div class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur tincidunt sapien, sed hendrerit metus pharetra et. Mauris nec turpis faucibus, mattis purus sed, tempus risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus rutrum luctus dapibus. Integer sed sodales sem, quis accumsan augue. Mauris non augue dignissim, vestibulum risus nec, convallis augue. Integer quis elit et nisl facilisis pellentesque sit amet at dui.</div> </div>