Html 在div中将文本拆分到右上角_Html_Css_Text

Html 在div中将文本拆分到右上角

html css text

Html 在div中将文本拆分到右上角,html,css,text,Html,Css,Text,我试图使我的div中的文本再次转到顶部，并在到达div底部时从顶部开始向下例如：我目前的html是： <html> <head> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <div id="test"> <ul class="ulstyle"> <

我试图使我的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解决这个问题吗？

试试这个解决方案：

<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;
}



文本1
文本2
文本3
文本4
文本5
文本6
文本7
文本8
文本9
文本10
案文11
文本12
文本13
文本14
文本15

#试验{
边框：1px实心#000；
}
#测试ul{
列表样式：无；
}
艾尔斯泰先生{
-moz列数：6；
-webkit列数：6；
列数：6；
moz列宽：150px；
-webkit列宽：150px；
列宽：150px；
}

链接到JSFIDLE:

在父div上添加此属性

-webkit列计数：3；/*铬、狩猎、歌剧*/
-moz列计数：3；/*火狐*/
列数：3如果要执行此操作，有三个选项
并排做两次跳水
给他们浮动：left
，这不会使底部部分向上移动。根据顶部div的宽度，将有列
使用Internet Explorer不支持的多列布局，请参阅：和
使用CSS列计数
（与webkit兼容）。