css - float div两列布局空白

标签 css html css-float

我有 X 个帖子,每个帖子都有固定的宽度和未知的高度,并希望它们在单个 div-wrapper 中位于两列中。但是,当我将它们全部放在 float 左侧时,就会发生这种情况。

enter image description here

如何删除空格?

最佳答案

在偶数 block 上添加 clear:right,在奇数 block 上添加 clear:left!

<style type="text/css">
    .odd { float: left; clear: left; }
    .even { float: right; clear: right; }
</style>

<div class="odd">content</div>
<div class="even">content</div>
<div class="odd">content</div>
<div class="even">content</div>
<div class="odd">content</div>

关于css - float div两列布局空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12729629/

相关文章:

javascript - 如何在 Javascript 中设置表格单元格的背景图像?

javascript - 带有 DOM 的 anchor 标记 while 循环事件始终返回表中的最后一行 element.parentNode

javascript - Html可折叠点击不展开

css - "Float"没有 flexbox 的两侧居中元素?

javascript - jquery: onclick 改变背景颜色

css - float div 中的格式化列表

css - 浏览器如何将相邻的div布局到 float 的div

html - float 重叠文本重叠图像

javascript - 如何在不同的div中有两个单独的复选框,同时选中和取消选中?

javascript - 如何在 JavaScript 中添加 Google 登录?