停止浮动元素创建行

时间:2017-08-23 11:31:01

标签: css css3 flexbox css-float css-grid

我正在使用一些浮动的divs来创建一个砌体网格样式,但是由于网格的样式,我遇到浮动问题。如果结尾div高于divs的其余部分,则一旦到达行尾,则会阻止下一行浮动到下方。而是创建自己的行......这可以克服吗?

.sqw1h1{
  width: 20vw;
  padding-bottom: 20%;
  background: green;
}
.sqw2h1{
  width: 40vw;
  padding-bottom: 20%;
  background: blue;
}
.sqw2h2{
  width: 40vw;
  padding-bottom: 40%;
  background: red;
}
.sqw1h2{
  width: 20vw;
  padding-bottom: 40%;
  background: purple;
}
.item{
  position: relative;
  background-position: center center;
  background-size: 100% auto;
  height: 0;
  display: inline-block;
  float: left;
  vertical-align: top;
}
.y3{
  background: orange;
}
<div class="featured-grid">
  <div class="item sqw2h2">
  </div>
  <div class="item sqw1h1">
  </div>
  <div class="item sqw2h1">
  </div>
  <div class="item sqw1h1 y3">
  </div>
  <div class="item sqw1h1">
  </div>
  <div class="item sqw1h2">
  </div>
  <div class="item sqw2h2">
  </div>
</div>

JsFiddle - https://jsfiddle.net/fxr37nmx/1/

0 个答案:

没有答案