Question

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

我已经设置了我的列。我实际上使用的是三列布局，第三列用于我的侧边栏图像，而另外两个我希望有框（基本上不使用表格的桌子），图像和文字交替显示（公园徽标及其名称/位置在文本中）在下面排列在另一列中的那些）。我需要为每个列添加什么样的代码来复制我的表格布局？

Answer 1

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

<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的空间，那么它们将会环绕。的 Try it.

如果将宽度设置为50％，you'll get a two-column layout。去除高度，调整内部风格，你很高兴。

这不会考虑你的侧边栏，但你的侧边栏并不是列表中的一部分，而且你似乎还是以背景形式处理它，所以真的不需要任何特殊的东西。如果您想确保列表与列表不重叠，可以在列表中设置margin-right，它不会在那里。

CSS：如何将框放入列中

1 个答案: