你如何漂浮没有垂直间隙的元素？ [英] How do you float elements without a vertical gap?

问题描述

我正在尝试将元素左移。这是我的CSS：

I am trying to float elements left. Here is my css:

width: 320px;
float: left;
border: 1px solid #ccc;
margin-top: 10px;
margin-right: 10px;
border-radius: 5px;

我的生成输出

但我想显示我的div这种格式就像

But i want to show my div in this format like

请帮助我。如何防止使用CSS的垂直间隙？

Please help me out. How do I prevent the vertical gap using CSS?

推荐答案

如果总是有两列，并且内容始终位于左侧或右列，您可以在第二列使用float，这将解决问题。

If there will always be two columns and the content is always in the left or right column, you can use float right on the 2nd column and that would resolve the issue.

.container > .content-box:nth-child(odd) {float:left}
.container > .content-box:nth-child(even) {float:right}

未来，CSS Flexbox将解决此问题;但是，它还没有得到很好的支持。

In the future, CSS Flexbox will resolve this issue; however, it isn't well supported as of yet.

这篇关于你如何漂浮没有垂直间隙的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！