为什么在第三行之后，float属性无法正常工作？

debugcn 发表于 Dev

托波利略

经过几行后，css float属性有一个奇怪的行为，我不知道其原因。

考虑到我不能在行之间添加带有“ clear”属性的div，因为html将动态生成（php循环）。

我认为为了做到这一点，我应该在php中创建一个函数，该函数确定何时在行之间插入一个清晰的div，因为有时每2张图片有时是3张图片。

但是我更喜欢CSS解决方案。

这是完整的代码：

.row {
    width: 600px;
    text-align: center;
    margin: 0 auto;
}

.boxes{
    box-sizing: border-box;
    position: relative;
    min-height: 1px;
    height: auto;
    float: left;
    padding-left: 10px;
    padding-bottom: 10px;   
}

.box1 {
    width: 33.33333333333333%;
}

.box2 {
    width: 66.66666666666666%;
}

.box-inner {
    background-color: grey;
    width: 100%;
    height: 100%;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

<html>

  <body>
    <div class="row">
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
      <div class="box2 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
        </div>
      </div>
      <div class="box2 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
        </div>
      </div>
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
    </div>
  </body>

</html>

j08691

在您的示例中，您的图像比之前的图像稍短。这导致clear通常会修复的下一行上的间隙。如果您每行有相同数量的元素，那么nth-child可以使用clear这样的东西，但是由于您说每行的元素数量可能会改变，所以这行不通。一个简单的解决方法是在.box-inner班级上设置最小高度：

.row {
  width: 600px;
  text-align: center;
  margin: 0 auto;
}

.boxes {
  box-sizing: border-box;
  position: relative;
  min-height: 1px;
  height: auto;
  float: left;
  padding-left: 10px;
  padding-bottom: 10px;
}

.box1 {
  width: 33.33333333333333%;
}

.box2 {
  width: 66.66666666666666%;
}

.box-inner {
  background-color: grey;
  width: 100%;
  height: 100%;
  min-height: 122px;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

<div class="row">
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
  <div class="box2 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
    </div>
  </div>
  <div class="box2 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
    </div>
  </div>
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。