Question

使用普通的旧HTML，我该如何实现这样的布局？

enter image description here

我在一个数组中有10-50个动态元素，我需要如图所示显示它们。

如果我只将它们添加到容器div中，它会从左到右。

如果每个元素都是div，则它们从上到下堆叠，但从不包装到下一列。

使用普通旧HTML通常如何实现？修改我需要动态工作，例如如果可能只有2个项目，或50;我不能硬编码3＆lt; ul＆gt;列表。

Answer 1

<!DOCTYPE html>
<html>
<head><title>Test</title>
<style type="text/css">
.flow ul {
    float: left;
}

.flow li {
    list-style: none;
}
</style>
</head>
<body>
    <div class="flow">
        <ul>
            <li>Albany, 1324</li>
            <li>Albuquerque, 3456</li>
            <li>Baton Rouge, 4566</li>
            <li>Bellvue, 9856</li>
            <li>Catameran, 75696</li>
        </ul>
        <ul>
            <li>D SiteName, 1324</li>
            <li>E SiteName, 3456</li>
            <li>F SiteName, 4566</li>
            <li>SiteName, 9856</li>
            <li>SiteName, 75696</li>
        </ul>
        <ul>
            <li>SiteName, 1324</li>
            <li>SiteName, 3456</li>
            <li>SiteName, 4566</li>
            <li>SiteName, 9856</li>
            <li>SiteName, 75696</li>
       </ul>
   </div>
</body>
</html>

或者如果你的意思是没有CSS，当你说“普通的旧HTML”时，你可能想要这样的东西，但这可能不是你想要的东西，因为它不使用<div>元素。

<!DOCTYPE html>
<html>
<head><title>Test</title>
<body>
    <table>
    <tr>
    <td>
        <ul>
            <li>Albany, 1324</li>
            <li>Albuquerque, 3456</li>
            <li>Baton Rouge, 4566</li>
            <li>Bellvue, 9856</li>
            <li>Catameran, 75696</li>
        </ul>
    </td>
    <td>
        <ul>
            <li>D SiteName, 1324</li>
            <li>E SiteName, 3456</li>
            <li>F SiteName, 4566</li>
            <li>SiteName, 9856</li>
            <li>SiteName, 75696</li>
        </ul>
    </td>
    <td>
        <ul>
            <li>SiteName, 1324</li>
            <li>SiteName, 3456</li>
            <li>SiteName, 4566</li>
            <li>SiteName, 9856</li>
            <li>SiteName, 75696</li>
       </ul>
    </td>
    </tr>
    </table>
</body>
</html>

您可能还希望使用以<br>元素整数<ul>和<li>元素结尾的行，具体取决于您的需要。

Answer 2

使用表格。上帝只知道人们使用它们远远超过它们应用的图形，但这就是它们的用途。

我不知道你可以让它自动换行，但即使你使用浮点数 - 你仍然需要预定义列。

您可以找到语法here。

Answer 3

在普通的旧HTML中，您将使用ordered lists并重置每列的列表。

<ol>
    <li>.</li>
    <li>.</li>
    <li>.</li>
    <li>.</li>
</ol>

<ol start="5">
    <li>.</li>
    <li>.</li>
    <li>.</li>
    <li>.</li>
</ol>

等

然后float左边的列表。

当然，这不会动态更新。

修改

根据评论，您可以使用CSS3动态执行此操作

div{ column-count: 3; column-gap: 1em; column-rule: 1px solid black; -moz-column-count: 3; -moz-column-gap: 1em; -moz-column-rule: 1px solid black; -webkit-column-count: 3; -webkit-column-gap: 1em; -webkit-column-rule: 1px solid black; }

http://jsfiddle.net/jasongennaro/3GSp6/1/

这只是现代浏览器。 Chrome，Firefox，Safari。

Answer 4

像这样：http://jsfiddle.net/PTLm6/5/

使用普通旧HTML的流布局行为？

4 个答案: