CSS

Question

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>

Answer 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%;
}

Answer 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>

Answer 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>

Answer 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>

CSS - 向左浮动 + 填充 = 最后 Div 向下？

CSS - Float Left + Padding = Last Div Go Down?

padding

css-float