如何在没有垂直间隙的情况下浮动元素？

Question

我试图将元素留下来。这是我的css：

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

我生成的输出

但我想以这种格式显示我的div，如

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

Answer 1

如果始终有两列且内容始终位于左列或右列，则可以在第二列上使用float，这样就可以解决问题。

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

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

Answer 2

当div高度改变时，你必须有像你一样的漂浮问题。要解决此问题，您必须使用定位技术，或者您可以在第三个div中使用负值的margin-top。

或者，您应该更改标记，例如：

<div class="col col1">
  <div>div one</div>
  <div>div three</div>
</div>
<div class="col col2">
  <div>div two</div>
</div>

然后你可以轻松管理css ......

Answer 3

有两个不同的div ID，一个可以是#left，另一个是#right。您希望在左侧浮动的所有内容都应该进入#left，右侧的所有内容都会进入#right。

然后您要添加以下样式：

#left {
  float: left;
}

这应该可以解决问题。您将需要单独应用框的样式。如果你想要一个这个解决方案的例子，你可以查看我的博客http://refact.io并查看我的“推荐服务”的来源，它的布局与你想要的相似（两列包含多个项目）每一栏）。

请告诉我这是否适合您。

Answer 4

http://jsfiddle.net/qgdy7kd8/

.col {width:50%; float:left;}
.box {padding:1em;}

<div class="col">
<div class="box"></box>
</div>

Answer 5

.wrap{
  width:450px;
  border:1px solid red;
  overflow:hidden;
}

.wrap div{
  padding:10px;
}

.box1{
  width:200px;
  float:left;
  border:1px solid green;
}

.box2{
  width:200px;
  float:right;
  border:1px solid blue;
}

.box3{
  width:200px;
  float:left;
  border:1px solid yellow;
}

<div class="wrap">
    <div class="box1"> commodo rhoncus ultrices. Etiam hendrerit tellus a malesuada blandit. Integer sed dignissim sapien. Etiam auctor scelerisque nulla eu tempus. Aenean aliquet vitae velit id ornare. Duis at ultrices dui.
    </div>
    <div class="box2">
        Praesent eget felis vel dolor egestas placerat id eget lacus. Ut dapibus, risus sit amet aliquam cursus, eros enim porttitor enim, et rutrum purus elit consectetur ante. Sed vel sem nisi. Integer rutrum hendrerit tincidunt. Etiam cursus ipsum vitae ornare faucibus. Cras non hendrerit massa. Quisque porttitor metus felis, et bibendum purus lobortis in. Nullam purus neque, vehicula ut metus quis, faucibus egestas lacus. Mauris sodales auctor viverra.
    </div>
    <div class="box3">
    Praesent mi magna, tincidunt id arcu sed, cursus bibendum libero. In tincidunt urna ultrices imperdiet mattis. Aenean eu ligula finibus lacus tincidunt pretium eget at erat. Praesent faucibus ullamcorper rhoncus. Morbi ac dui sit amet nibh aliquet fringilla. Integer laoreet interdum augue, ac luctus nulla facilisis eu. Proin commodo metus at felis mollis dignissim. Fusce efficitur velit id sapien bibendum, ac pretium elit dictum. Fusce eleifend ipsum 
    </div>
</div>

考虑使用Masonry

编辑：取出高度att并调整“换行”div的宽度：http://jsfiddle.net/zjL16xnn/

Answer 6

您尝试做的事情被称为＆＃34;砌体布局＆＃34; ，尽管元素高度可变，但它总是与其上方的元素完美对齐。< / p>

如何设计自己的设计需要很长时间，我的建议是你做一些谷歌搜索（用粗体文字）。这里还有几个常用框架的链接：

http://masonry.desandro.com/

http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Flexbox

Answer 7

this updated Fiddle这是您正在寻找的吗？

<强> HTML ：

＆＃13;

＆＃13;

.one {
  float: left;
  width: 50px;
  background-color: lightblue;
}

.two {
  float: left;
  width: 50px;
  background-color: pink;
}

.oneone {
  float: left;
  width: 50px;
  background-color: orange;
}
.onetwo {
  float: left;
  width: 50px;
  background-color: lightgreen;
}

＆＃13;

<div class="one">
  <div class="oneone">
    oneone
    <p>
    again
  </div>

  <div class="onetwo">
    onetwo
    <p>
    again
  </div>
</div>

<div class="two">
  two
  <p>
  etfgb
  <p>
  sfsd
</div>

＆＃13;

＆＃13;

＆＃13;

<强>更新

在我的答案顶部检查更新的小提琴。

Answer 8

您需要创建两列，并浮动列，而不是浮动各个框。

Answer 9

Internet Explorer无法正确处理负边距。您需要将该div定位为relative或absolute并使用top:-50px（或者需要多少px。）