为什么在第三行之后float属性不能正常工作？

编程问答 2022-06-09

问题描述

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

see image

请考虑到我无法在行之间添加具有“ 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>

解决方法

在您的示例中，您的图像比之前的图像稍短。这导致 container.RegisterInstance<Func<IHandler,HandlerType,IHandler>> ((handler,type) => { IHandler context = null; switch (type) { case HandlerType.Type0: context = new Type0(orderHandler,container.GetInstance<IUtilityLogic>()); break; case HandlerType.Type1: context = new Type1(orderHandler,container.GetInstance<IUtilityLogic>(),container.GetInstance<IShipmentLogic>()); break; case HandlerType.Type2: context = new Type2(orderHandler); break; case HandlerType.Type3: context = new Type3(orderHandler,container.GetInstance<IUtilityLogic>()); break; case HandlerType.Type4: context = new Type4(orderHandler,container.GetInstance<IShipmentLogic>(),container.GetInstance<Func<string,string,ICache>>()); break; default: context = null; break; } return context; }); 通常会修复的下一行出现间隙。如果每行的元素数相同，则可以使用clear之类的东西，但请注意，因为您说过每行的元素数可能会改变，所以这行不通。一个简单的解决方法是在nth-child类上设置最小高度：

.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;
}

,

最简单的解决方案是在容器中添加固定高度。

.box-inner {
    background-color: grey;
    width: 100%;
    height: 120px;
    overflow: hidden;
}

上述内容的另一项补充是增加对象适合度：覆盖图像以确保其填充容器空间。

.box-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
css-floathtml