Question

我试图在一个div中放置一些div，其中last div具有overflow参数，用于使其以某种方式灵活地占用剩余空间。 jsfiddle 示例。

HTML代码：

<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</div>

CSS代码：

.container {
    width: 400px;
    height: auto;
    border: 1px solid red;
    margin: 0 auto;
}

.box1 {
    width: 50px;
    height: 100px;
    border: 3px solid;
    border-color: rgba(23, 23, 23, 0.5);
    background-color: rgb(227, 227, 227);
    margin: 4px 4px 4px 4px;
    padding: 0px;
    float: left;
}

.box2 {
    width: 100px;
    height: 50px;
    border: 3px solid;
    border-color: rgba(23, 23, 23, 0.5);
    background-color: rgb(191, 239, 255);
    margin: 4px 4px 4px 4px;
    padding: 0px;
    float: left;
}

.box3 {
    width: 70px;
    height: 30px;
    border: 3px solid;
    border-color: rgba(23, 23, 23, 0.5);
    background-color: rgb(238, 212, 232);
    margin: 4px 4px 4px 4px;
    padding: 0px;
    float: left;
}

.box4 {
    width: 30px;
    height: 100px;
    border: 3px solid;
    border-color: rgba(23, 23, 23, 0.5);
    background-color: rgb(235, 252 ,212);
    margin: 4px 4px 4px 4px;
    padding: 0px;
    float: left;
}

.box5 {
    height: 70px;
    border: 3px solid;
    border-color: rgba(23, 23, 23, 0.5);
    background-color: rgb(255, 173, 187);
    margin: 4px 4px 4px 4px;
    padding: 0px;
    overflow: hidden;
}

现在我有两个问题：

为什么容器div不会（直观地）包含所有div但只包含最后一个div（box5）以及如何修复它？
为什么最后一个div（有溢出）不使用margin参数？您可以在小提琴中看到左边的边距仅为4px而不是总共8px。

Answer 1

添加到.container overflow：hidden

.container { width: 400px; height: auto; border: 1px solid red; margin: 0 auto; overflow:hidden }

Answer 2

将此添加到您的styleshit：

Console

Answer 3

实际上，根据您需要的浏览器支持级别，使用flexbox这很简单，您不必清除任何浮点数...因为它们不是任何浮点数。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.container {
  width: 80%;
  height: auto;
  border: 1px solid red;
  margin: 1em auto;
  overflow: auto;
  display: flex;
}
.narrow {
  width: 60%;
}
[class*="box"] {
  margin: 4px;
  padding: 0;
  border: 3px solid;
}
.box1 {
  width: 50px;
  height: 100px;
  border-color: rgba(23, 23, 23, 0.5);
  background-color: rgb(227, 227, 227);
}
.box2 {
  width: 100px;
  height: 50px;
  border-color: rgba(23, 23, 23, 0.5);
  background-color: rgb(191, 239, 255);
}
.box3 {
  width: 70px;
  height: 30px;
  border-color: rgba(23, 23, 23, 0.5);
  background-color: rgb(238, 212, 232);
}
.box4 {
  width: 30px;
  height: 100px;
  border-color: rgba(23, 23, 23, 0.5);
  background-color: rgb(235, 252, 212);
}
.box5 {
  height: 70px;
  border-color: rgba(23, 23, 23, 0.5);
  background-color: rgb(255, 173, 187);
  flex: 1;
}

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5"></div>
</div>

<div class="container narrow">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5"></div>
</div>

将div放在div //柔性div宽度//使用边距内不起作用

3 个答案: