如何使浮动的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和删除float: left类中的元素.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>