CSS - 向左浮动 + 填充 = 最后一个 div 向下？答案

【问题标题】：CSS - Float Left + Padding = Last Div Go Down?CSS - 向左浮动 + 填充 = 最后一个 div 向下？
【发布时间】：2017-03-28 19:44:33
【问题描述】：

3 列左浮动，每列宽度为 33.33%。我添加了填充以使列看起来更整洁。但显然最后一个 DIV 被推到新行。这个有什么解决办法吗？在这里我也拿出复制品供参考。

* {
  padding:0;
  margin:0;
}
.row {
  width:80%;
  display:block;
  margin:40px auto;
  background: #f3f3f3;
  overflow:auto;
}
.col {
  float:left;
  width:33.33%;
  background:#333;
  color:#fff;
  text-align:center;
  position:relative;
  padding:20px
}

.ful-dark {
  opacity:0.9
}

.mid-dark {
  opacity:0.8
}

.lil-dark {
  opacity:0.7
}

<div class="row">
  <div class="col ful-dark"><h1>One</h1></div>
  <div class="col mid-dark"><h1>Two</h1></div>
  <div class="col lil-dark"><h1>Three</h1></div>
</div>

【问题讨论】：

标签： css css-float padding

【解决方案1】：

您希望 3 * (padding-right + padding-left + width) 等于 100%。

试试

.col {
  float:left;
  width:31.33%;
  background:#333;
  color:#fff;
  text-align:center;
  position:relative;
  padding:1%;
}

【讨论】：

你没有错，但你正在努力。 box-sizing: border-box 自动执行此操作。

【解决方案2】：

不幸的是，默认情况下，填充不计入尺寸，因此宽度 + 填充使每个实际上都比三分之一宽。 box-sizing: border-box 是一个很好的解决这个问题的工具，使所有填充和边框成为宽度测量的一部分：

* {
  padding:0;
  margin:0;
  box-sizing: border-box;
}
.row {
  width:80%;
  display:block;
  margin:40px auto;
  background: #f3f3f3;
  overflow:auto;
}
.col {
  float:left;
  width:33.33%;
  background:#333;
  color:#fff;
  text-align:center;
  position:relative;
  padding:20px
}

.ful-dark {
  opacity:0.9
}

.mid-dark {
  opacity:0.8
}

.lil-dark {
  opacity:0.7
}

<div class="row">
  <div class="col ful-dark"><h1>One</h1></div>
  <div class="col mid-dark"><h1>Two</h1></div>
  <div class="col lil-dark"><h1>Three</h1></div>
</div>

【讨论】：

【解决方案3】：

使用box-sizing: border-box，它将强制提供的尺寸为完整尺寸，包括任何顺序和间距，例如您的填充。

* {
  padding:0;
  margin:0;
  box-sizing: border-box;
}
.row {
  width:80%;
  display:block;
  margin:40px auto;
  background: #f3f3f3;
  overflow:auto;
}
.col {
  float:left;
  width:33.33%;
  background:#333;
  color:#fff;
  text-align:center;
  position:relative;
  padding:20px
}

.ful-dark {
  opacity:0.9
}

.mid-dark {
  opacity:0.8
}

.lil-dark {
  opacity:0.7
}

<div class="row">
  <div class="col ful-dark"><h1>One</h1></div>
  <div class="col mid-dark"><h1>Two</h1></div>
  <div class="col lil-dark"><h1>Three</h1></div>
</div>

【讨论】：

【解决方案4】：

这是因为填充。尝试输入box-sizing: border-box;，这将在声明填充时保留容器的width。

* {
  padding:0;
  margin:0;
}
.row {
  width:80%;
  display:block;
  margin:40px auto;
  background: #f3f3f3;
  overflow:auto;
}
.col {
  float:left;
  width:33.33%;
  background:#333;
  color:#fff;
  text-align:center;
  position:relative;
  padding:20px;
  box-sizing: border-box;
}

.ful-dark {
  opacity:0.9
}

.mid-dark {
  opacity:0.8
}

.lil-dark {
  opacity:0.7
}

<div class="row">
  <div class="col ful-dark"><h1>One</h1></div>
  <div class="col mid-dark"><h1>Two</h1></div>
  <div class="col lil-dark"><h1>Three</h1></div>
</div>

【讨论】：