Question

我想在固定大小的<div>元素中并排放置可变数量的HTML列表，如下所示：

+--------------------------------+
| LIST 1     LIST 2     LIST 3   |
| - xxx      - xxx      - xxx    |
| - xxx      - xxx               |
|            - xxx               |     I need this line break –
|                                | <-- I don't want LIST 4 to be
| LIST 4                         |     directly beneath LIST 1!
| - xxx                          |
| - xxx                          |
+--------------------------------+

我浮动列表（float: left;）以使它们并排放置，但我不知道如何避免LIST 4尽可能向上移动（直到它直接位于LIST 1之下）。 / p>

如何获得LIST 1和LIST 4之间的垂直空间？有没有办法优雅地使用clear属性来解决这个问题？

Answer 1

我没有试过这个，但我想你可以在列表上放一个margin-bottom，然后第四个列表应该清除第一行列表中最长的一个加上边距。但我没试过，所以我错了。

Answer 2

您需要做的是清除列表3和列表4之间的左右浮动。

使用clear:both CSS属性实际上可以在浮动元素之间创建换行符。

编辑我附加了jQuery，以向您展示动态生成您正在寻找的效果的最优雅方式。

<style type="text/css">
    ul {float:left;}
    .clear {clear:both;}
</style>

<script type="text/javascript" src="localjQuery.js"></script>

<script type="text/javascript">
 $('ul').last().prepend('<div class="clear"></div>')
</script>

Answer 3

你可能会尝试将列表1 - 3放在他们自己的div中，将4放在另一个div中，这样两个父母就会互相浮动。像这样的Div定位有点时髦，我遇到过很多这样的问题。一个不同的选择是在加载文档后查询列表1 - 3的大小，并将它们的高度设置为相同的最大值，以便列表4正确地位于它们下面。

Answer 4

对不起。如果列表的数量和每个列表中的项目不同，则没有简单的仅CSS解决方案。

Answer 5

我会为所有这些列表添加一个固定的高度，以便它们都是等距的。只需使用最长列表的高度。

并排放置HTML列表

5 个答案: