当前位置：文江博客话题详情

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

发布于 2024-11-26 09:52:33 字数 329 浏览 0 评论 0原文

使用普通的旧 HTML，我怎样才能实现这样的布局？

在此处输入图像描述

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

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

如果每个元素都是 div，它们会从上到下堆叠，但永远不会换行到下一列。

这通常是如何使用普通的旧 HTML 实现的？编辑我需要它动态工作，例如，如果可能只有 2 个项目，或 50 个；我无法硬编码 3

列表。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

同展鸳鸯锦 2024-12-03 09:52:33

<!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>

或者，如果您说“纯旧 HTML”时指的是没有 CSS 的内容，您可能想要这样的内容，但这可能不是您想要的内容，因为它不使用

元素。

<!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>

您可能还想使用以元素结尾的行，而不是

元素，具体取决于什么你需要。

<!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>

Or if you mean something without CSS when you say, "plain old HTML", you might want something like this but this is perhaps not something you want because it doesn't use the <div> element.

<!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>

You might also want to use lines terminated with <br> elements intead of <ul> and <li> elements depending on what you need.

回复收藏 0 原文

情绪操控生活 2024-12-03 09:52:33

使用表格。只有上帝才知道人们对它们的使用远远超过了图形处理的需要，但这就是它们被构建的目的。

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

您可以在此处找到语法。

回复收藏 0 原文

入怼 2024-12-03 09:52:33

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

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

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

等等。

然后将列表浮动到左侧。

当然，这不会动态更新。

编辑

根据评论，您可以使用 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、火狐、Safari。

In plain old HTML, you would use ordered lists and reset the lists for each column.

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

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

Etc.

Then float the lists to the left.

Of course, this would not dynamically update.

EDIT

As per comment, you can do this dynamically with 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/

This is modern browsers only. Chrome, Firefox, Safari.

回复收藏 0 原文