有哪些选项可以让文本/列表项出现在列中？答案

【问题标题】：What options exist to get text/ list items to appear in columns?有哪些选项可以让文本/列表项出现在列中？
【发布时间】：2010-04-12 08:55:39
【问题描述】：

我有一堆来自外部来源的 HTML 标记，主要是 h3 元素和 ul 元素。

我想让内容流在 3 列中。我知道 CSS3 中会出现一些东西，但是我必须有哪些选项才能让这些内容在当时很好地流入 3 列？我并不担心 IE6（只要它优雅地降级）。我是否坚持使用 jQuery 来解析标记并将其分成 3 个浮动的 div？

谢谢

更新

根据要求，这是我正在使用的一些 HTML

<h3>Tourism Industry</h3>

            <ul>

                <li><a href="">Something</a></li>
                <li><a href="">Something</a></li>
                <li><a href="">Something</a></li>

                <li><a href="">Something</a></li>
            </ul>

            <h3>Small Business</h3>
            <ul>
                <li><a href="">Something</a></li>
                <li><a href="">Something</a></li>
                <li><a href="">Something</a></li>

                <li><a href="">Something</a></li>
                <li><a href="">Something</a></li>

            </ul>

还有更多遵循相同格式的内容。

【问题讨论】：

能否请您发布您正在使用的 html 示例？

标签： jquery html css

【解决方案1】：

就个人而言，我会选择 CSS3。运气好的话，它甚至可能在 IE9 中实现。如果您需要 IE7/8/Opera 支持，我想我会在 CSS3 不可用时添加一个 JavaScript 解决方案（正如其他用户所解释的那样）。

【讨论】：

【解决方案2】：

虽然我不确定我是否完全理解你的问题（但我想我知道），但我可能会这样做：

在页面某处创建一个 div 并将 display 属性设置为 none。
检索 HTML 并将其写入该 div。
获取每个单独的<h3> 和<ul> 元素集（使用jQuery），执行任何类应用程序或在显示之前需要执行的任何操作，并将它们写入目标容器。如果您不知道您将获得多少组<h3> 和<ul>，那么一张桌子最适合作为目标（哦不，是的，我说的是桌子！）因为您将能够控制在哪里出现换行等（这实际上将大大有助于保持与 IE6 等旧浏览器的兼容性）。
从 DOM 中移除隐藏的 div。

不确定这是否是您正在寻找的答案，但这就是我解决问题的方式。祝你好运！

【讨论】：

【解决方案3】：

鉴于您的 HTML 示例，我怀疑是否有任何方法可以仅使用 CSS 创建列式布局。问题是您的 H3 和 UL 标签分组不受任何容器的约束。这使得浮动这些组并将它们打包到一个准直布局中变得非常困难。

考虑到您必须使用的内容，我认为 inkedmn 概述的流程相当不错。

【讨论】：