Question

轮廓是否允许重叠最后一行似乎超过一圈我不知道如何填补空白。第一行似乎与第二行有适当的差距。但是底行轮廓似乎与容器轮廓重叠。我试过添加边距和填充但无济于事。任何链接或解释都会有所帮助。

.container{
  width:312px;
  outline: red dotted thin;
  margin:auto;
}

.floater1{
  width:100px;
  outline: green dotted thin;
  float:left;
  margin:2px;
  padding-bottom:2px;
}

.floater2{
  width:100px;
  outline: blue dotted thin;
  float:left;
  margin:2px;
  padding-bottom:2px;
}

.abit{
  width:96px;
  outline: yellow dotted thin;
  margin-left:2px;
  margin-right:2px;
  margin-bottom:2px;
  clear:both;
}

<div class="container">
  <div class="floater1">
    <img src="halal.png" width="98" height="100" alt="Holy logo"/>
    <div class = "abit">text goes here</div>
  </div>

  <div class="floater2">
    <img src="halal.png" width="98" height="100" alt="Holy logo"/>
    <div class= "abit">text goes here</div>
  </div>

  <div class="floater1">
    <img src="halal.png" width="98" height="100" alt="Holy logo"/>
    <div class= "abit">text goes here and here here here here here here</div>
  </div>

  <div class="floater2">
    <img src="halal.png" width="98" height="100" alt="Holy logo"/>
    <div class= "abit">text goes here here here</div>
  </div>

  <div class="floater1">
    <img src="halal.png" width="98" height="100" alt="Holy logo"/>
    <div class= "abit">text goes here and here here here here</div>
  </div>

  <div class="floater2">
    <img src="halal.png" width="98" height="100" alt="Holy logo"/>
    <div class= "abit">text goes here and here here here here here here 
    </div>
  </div>
</div>

Answer 1

如果您的问题是容器没有包含其内容，您只需将overflow: hidden添加到容器中即可。

.container {overflow: hidden;}

如果这会导致任何问题，还有其他“clearfix”选项。如上所述，目前尚不清楚你在问什么。

Answer 2

首先，我个人不喜欢在HTML和CSS中使用浮动元素。关于您的问题，我将.container类定义为display: flex;，将浮动元素定义为flexbox flex: 1;。有关FlexBoxes和内容的进一步阅读，请参阅http://www.w3schools.com/cssref/css3_pr_flex.asp。

如何在轮廓之间留出空隙？

2 个答案: