在 div 中将文本打断到右上角

Question

我正在尝试让我的 div 中的文本再次回到顶部，并在到达我的 div 底部时从顶部开始下降到底部。

示例：

我目前的html是：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
    <div id="test">
        <ul class="ulstyle">
            <li>Text </li>
            <li>Text </li>
            <li>Text </li>
            <li>Text </li>
            <li>Text </li>
            <li>Text </li>
            <li>Text </li>
            <li>Text </li>
            <li>Text </li>
            <li>Text </li>
            <li>Text </li>
            <li>Text </li>
            <li>Text </li>
            <li>Text </li>
            <li>Text </li>
        </ul>
    </div>
</body>

有人用 Html、Css 甚至 Javascript 解决这个问题吗？

Answer 1

试试这个解决方案：

<div id="test">
    <ul class="ulstyle">
        <li>Text 1</li>
        <li>Text 2</li>
        <li>Text 3</li>
        <li>Text 4</li>
        <li>Text 5</li>
        <li>Text 6</li>
        <li>Text 7</li>
        <li>Text 8</li>
        <li>Text 9</li>
        <li>Text 10</li>
        <li>Text 11</li>
        <li>Text 12</li>
        <li>Text 13</li>
        <li>Text 14</li>
        <li>Text 15</li>
    </ul>
</div>

#test {
    border: 1px solid #000;
}

#test ul {
    list-style: none;
}

.ulstyle {
    -moz-column-count: 6;
    -webkit-column-count: 6;
    column-count: 6;
    moz-column-width: 150px;
    -webkit-column-width: 150px;
    column-width: 150px;
}

Link 到 jsfiddle：http://jsfiddle.net/btabdelkrim/8Laph9sz/1/

Answer 2

在父 div 上添加此属性

 -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;

Answer 3

如果你想这样做，有三个选项。

并排制作两个div
给他们float: left，虽然这不会把底部放到顶部。将根据您的顶部 div 的宽度来划分列。
使用 Internet Explorer 不支持的多列布局，请参阅：http://caniuse.com/#feat=multicolumn and https://css-tricks.com/snippets/css/multiple-columns

在 div 中将文本打断到右上角

Breaking text to right top in a div

html

css

text