代码之家 › 专栏 › 技术社区 › Marius Schulz

并排放置HTML列表

css

Marius Schulz · 技术社区 · 15 年前

我想把可变数量的HTML列表并排放在一个固定大小的 <div>

+--------------------------------+
| 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; )让它们并排放置,但我不知道如何避免列表4尽可能向上移动(直到它直接位于列表1之下)。

如何获得列表1和列表4之间的垂直间距?有没有办法使用 clear

5 回复 | 直到 15 年前

Larsenal 15 年前

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

David Thomas 15 年前

margin-bottom 在列表上,则第四个列表应清除第一行列表中最长的,加上边距。但我还没试过,所以我可能错了。

GrandmasterB 15 年前

您可以尝试将列表1-3放在它们自己的div中,将列表4放在另一个div中,这样两个父级就会浮在彼此下面。像这样的Div定位有点奇怪,我经常遇到这种问题。另一个不同的选项是在加载文档后查询列表1-3的大小,并将它们的高度设置为相同的最大值,这样列表4就可以正确地定位在它们下面。

Moses 15 年前

使用 clear:both

编辑

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