Question

我正在尝试将4个div堆叠成一个大矩形。它分为双宽和单宽div，单宽为双倍大小的一半。前两个div完美地浮出水面。但是我希望下两个被反转，所以当用户看到它们时，它们会看到double，single，single，double。

这是问题开始的地方，单身就没有明显的原因坚持到右边。如果我把它放在双倍之后再次起作用，但那真的与我正在尝试做的事情有关。我也不认为这是一个间距问题，我确保他们有足够的空间相互贴合或者至少我相信我有。

<div id="hold-grid">
  <div class="doubleWide">
    <img src="http://www.placehold.it/677x349" alt="" />
    <div class="grid clear">
      <div class="doubleCell"></div>
      <div class="doubleCell"></div>
      <div class="doubleCell"></div>
      <div class="doubleCell"></div>
    </div>
  </div>
  <div class="singleWide">
    <img src="http://www.placehold.it/339x349" alt="" />
    <div class="grid clear">
      <div class="singleCell"></div>
      <div class="singleCell"></div>
    </div>
  </div>
  <div class="singleWide">
    <img src="http://www.placehold.it/339x349" alt="" />
    <div class="grid clear">
      <div class="singleCell"></div>
      <div class="singleCell"></div>
    </div>
  </div>
  <div class="doubleWide">
    <img src="http://www.placehold.it/677x349" alt="" />
    <div class="grid clear">
      <div class="doubleCell"></div>
      <div class="doubleCell"></div>
      <div class="doubleCell"></div>
      <div class="doubleCell"></div>
    </div>
  </div>
</div>


* {
    margin: 0;
    padding: 0;
}
.clear:after {
    clear: both;
    content: "";
    display: table;
}
#hold-grid {
    width: 60%;
}
img {
    display: block;
    width: 100%;
}
.doubleWide {
    width: 66.666%;
}
.singleWide {
    width: 33.333%;
}
.doubleWide, .singleWide {
    float: left;
    position: relative;
}
.grid {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 3;
}
.grid .singleCell, .grid .doubleCell {
    background-color: rgba(0, 0, 255, 0.5);
    float: left;
}
.grid .singleCell {
    padding-top: 51.4%;
    width: 100%;
}
.grid .doubleCell {
    padding-top: 25.7%;
    width: 50%;
}

Answer 1

在第二个div

之后添加clear个#singleWide课程

<div class="clear"></div>

Fiddle here

左浮动div没有正确堆叠

1 个答案: