css - CSS：如何将框放在列中

Question

我正在尝试用 CSS 替换我的索引页面上的一个两列表。要查看我当前的索引页面，请访问 http://www.negative-g.com。

我已经建立了我的专栏。我实际上正在使用三列布局，第三列用于我的侧边栏图像，而对于另外两个我想要有图像和文本交替的框（基本上是不使用表格的表格）（公园徽标及其名称/位置在文本中下面与另一列中的内容对齐）。我需要向每一列添加什么样的代码来复制我的表格布局？

score 0 · Accepted Answer

通常我会为此使用一堆浮动块。例如，如果我有一个项目列表：

<ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
    <li>Quux</li>
</ul>

（删除所有边距和填充后）我可以在li元素上设置尺寸，使它们成为块，并将它们向左浮动：

li {
    display: block;
    width: 100px;
    height: 50px;
    float: left;
}

如果它们只有 200px 的空间，那么它们就会环绕。试试看。

如果将宽度设置为 50%，您将获得两列布局。去掉高度，设计内部样式，你就可以开始了。

这没有考虑您的侧边栏，但您的侧边栏并不是列表的一部分，而且您似乎无论如何都将它作为背景处理，因此实际上不需要任何特殊的东西。如果你想确保列表不重叠，你可以margin-right在列表上设置一个，它就不会过去。

1 回答 1