如何使 li 元素在到达 div 元素底部时向右上升？

Question

我在 div 中有一个固定高度的列表，我怎样才能让一个 li 元素溢出到其他 li 元素的右边？

我已经尝试使用 float:next 但我希望它们从上到下然后向右并从上到下直到我结束我的 li 元素。

我只想使用一个列表，而不是多个相邻的列表。

这就是我现在的代码，

.test {
    height: 150px;
    width: 950px;
    border-radius: 10px;
    background-color: gray;
}

<!DOCTYPE html>
<html>
  <body>
    <div class="test">
            <ol>
                <li><a href="">test</a></li>
                <li><a href="">test</a></li>
                <li><a href="">test</a></li>
                <li><a href="">test</a></li>
                <li><a href="">test</a></li>
                <li><a href="">test</a></li>
                <li><a href="">test</a></li>
                <li><a href="">test</a></li>
                <li><a href="">test</a></li>
                <li><a href="">test</a></li>
                <li><a href="">test</a></li>
                <li><a href="">test</a></li>
                
            </ol>
        </div>
    <body>
<html>

解释一下我该怎么做。

Answer 1

其实你可以这样做：

.test {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

Fiddle:

https://jsfiddle.net/otfzgg52/

更多文档：

http://www.w3schools.com/css/css3_multiple_columns.asp

如何使 li 元素在到达 div 元素底部时向右上升？

how do i make an li element go up right when reaching the bottom of a div element?

html

css

list

overflow