如何使漂浮的DIV占据其容器的水平空间?

时间:2015-01-20 16:55:01

标签: html css

这就是我所说的:



#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>
    
&#13;
&#13;
&#13;

我想粉红色的细胞来填满行DIV的水平 垂直空间。如果我不让它们漂浮,他们就会这样做,但是我需要它们在整排中均匀分布。这是我实际代码的简化,但这是我面临的问题。

2 个答案:

答案 0 :(得分:8)

使用display: table-cell并从类float: left的元素中删除.cell

&#13;
&#13;
#row {
    border: solid blue;
    overflow: hidden;
}

.cell {
    display: table-cell;
    width: 33.333%;
    height: 100%;
    border: solid pink;
    box-sizing: border-box;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:4)

而不是浮动,而是使用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>