我正在尝试向左浮动元素。这是我的CSS：
width: 320px;
float: left;
border: 1px solid #ccc;
margin-top: 10px;
margin-right: 10px;
border-radius: 5px;
我生成的输出
但我想以这种格式显示我的 div
请帮帮我。如何使用 CSS 防止垂直间隙？
如何在没有垂直间隙的情况下浮动元素？
IT技术
javascript
html
css
2021-02-23 09:59:28
6个回答
如果总是有两列并且内容总是在左列或右列中，您可以在第二列上使用浮动右侧，这将解决问题。
.container > .content-box:nth-child(odd) {float:left}
.container > .content-box:nth-child(even) {float:right}
未来，CSS Flexbox 会解决这个问题；然而，它目前还没有得到很好的支持。
随着 div 高度的变化，您一定会遇到像您一样漂浮的问题。要解决这个问题，您必须使用定位技术，或者您可以只使用负值的 margin-top 为您的第三个 div。
或者，您应该更改您拥有的标记，如下所示：
<div class="col col1">
<div>div one</div>
<div>div three</div>
</div>
<div class="col col2">
<div>div two</div>
</div>
然后你就可以轻松管理css了...
有两个不同的 div ID，一个可以是#left，另一个是#right。您想要在左侧浮动的#left所有内容都应该进入，而您在右侧的所有内容都应该进入#right。
然后你想添加以下样式：
#left {
float: left;
}
这应该够了吧。您需要单独应用框的样式。如果您想要此解决方案的示例，您可以查看我的博客http://refact.io并查看我的“推荐服务”的来源，它与您要查找的内容具有相似的布局（两列有多个每列中的项目）。
让我知道这是否适合您。
.col {width:50%; float:left;}
.box {padding:1em;}
<div class="col">
<div class="box"></box>
</div>
您正在尝试做的被称为“砖石布局”，尽管元素高度是可变的，但它始终与其上方的元素完美对齐。
进入如何设计自己的设计需要很长时间，我的建议是您进行一些谷歌搜索（使用粗体文本）。此外，这里还有一些常用框架的链接：
http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Flexbox
其它你可能感兴趣的问题