我有一个用<li>
元素构建的流体网格。
例如:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
li
{
border:solid 1px green;
width: 100px;
min-height:50px;
display: inline;
margin: 10px;
float: left;
}
所以这看起来像:
----------- ----------- -----------
| | | | | |
| | | | | |
----------- ----------- -----------
----------- ----------- -----------
| | | | | |
| | | | | |
----------- ----------- -----------
万岁!
问题是当我在<li>
拉伸高度的元素之一中添加内容时。我想结束这样的事情:
----------- ----------- -----------
| apples | | | | |
| oranges | | | | |
| lemons | ----------- -----------
| cherries|
-----------
----------- ----------- -----------
| | | | | |
| | | | | |
----------- ----------- -----------
但我实际上最终是这样的:
----------- ----------- -----------
| apples | | | | |
| oranges | | | | |
| lemons | ----------- -----------
| cherries|
----------- ----------- -----------
| | | |
| | | |
----------- -----------
-----------
| |
| |
-----------
嘘!
所以基本上,当其中一个 s 从上面的元素向下推时,我试图保持“行”对齐<li>
,而不是推到右侧的可用空间。