Question

我有这些div动态创建的可变内容，它们都受相同的CSS规则控制。我希望它们被放置在两列中，它们之间没有空格，我尝试使用float: left/right，但仍然在顶部和底部留下空间。

这是一个示例代码（您也可以在JSFiddle上看到它）：

.posts{
  width: 100%;
}

.one{
  background-color: red;
  height: 100px;
  width: 40%;
  float: left;
}

.two{
  background-color: blue;
  height: 120px;
  width: 40%;
  float: left;  
}

<div class="posts">
  <div class="one">
  </div>
  <div class="two">
  </div>
  <div class= "two">
  </div>
  <div class ="one">
  </div>
</div>

因此，在该示例中，右div框很好，但它们在左上方框和下方div之间创建了一个空格。我尝试查找一些简单的示例，但所有这些示例都建议使用div和其他选项单独修改overflow: hidden。

使用所有 div共享同一个CSS的最佳方法是什么？

Answer 1

警告：如果您要支持的浏览器不支持columns，这将无效，可能仍然不适合您：

您要做的是创建Masonry样式布局。

这应该做你想做的事：

.container {
            column-count: 2;
       -moz-column-count: 2;
    -webkit-column-count: 2;
            column-gap: 0;
       -moz-column-gap: 0;
    -webkit-column-gap: 0;
    width: 80%;
    font-size: 0;
}

.container div {
    display: inline-block;
    width: 100%;
    margin: 0;
    font-size: 12px;
    color: white;
}

.container .one {
    height: 100px;
    background-color: red;
}

.container .two {
    height: 120px;
    background-color: blue;
}

<div class="container">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="two">two</div>
    <div class="one">one</div>
</div>

Answer 2

这是否能达到您的目的？

.posts{
    width: 100%;
}
.one,
.two {
    height: 100px;
    width: 40%;
    float: left;
}
.one{
    background-color: red;
}
.two{
    background-color: blue;   
}

<div class="posts">
    <div class="one"></div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="one"></div>
</div>

Answer 3

让你的代码像这样，

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
.posts{
    width: 50%;
     float:left;
}
.one{
    background-color: red;
    height: 100px;
    width:100%;
}
.two{
    background-color: blue;
    height: 120px;
    width: 100%;
}
</style>
</head>
<body>

<div class="posts">
    <div class="one"></div>
    <div class="two"></div>
</div>
<div class="posts">
    <div class="two"></div>
    <div class="one"></div>
</div>


</body>
</html>

＆＃13;

多个浮动div，它们之间没有空格

3 个答案: