css - 一旦达到 div 高度，强制 div 中的列表项 float

Question

我有一个固定高度的 div，它位于一个动态无序列表中。

目前列表项溢出了div。
需要做的是 float 列表项，以便它们不会溢出 div。

Answer 1

您可以使用 css3 列:

这里是 jsfiddle

HTML:

<div class="container">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</div>

CSS:

.container{
    background: #00f;
    height: 400px;
    width: 200px;
    overflow: hidden;

  -webkit-column-count: 2;  -webkit-column-gap: 15px;
     -moz-column-count: 2;     -moz-column-gap: 15px;
          column-count: 2;          column-gap: 15px;

}
li
{
    background: #ff0;
    height: 45px;
    margin: 5px 0 0 0;
    width: 50px;
}