CSS:如何在宽度为 100% 的情况下并排 float 3 个 div 而不会弄乱?

标签 css css-float width border

我想放三个 div { width:33%; border: 3px solid #333;} 在一个页面的旁边。但它就是失败了,就像总和超过 100% 一样。

如何并排 float 3 个 div 并占据宽度:100% 而不会弄乱?

最佳答案

边框不计入 div 的框内。他们要添加,因此弄乱了你的集合,它的宽度是:3boxes * (33%+3px+3px),这可能超过 100%。

使用:

.left {
  float:left; 
  width:33.3%;
  border: 3px solid #333;
}
.box-sizing { box-sizing: border-box; }

参见 Fiddle demo ,您可以调整结果框的大小以保持完美。 :)

关于CSS:如何在宽度为 100% 的情况下并排 float 3 个 div 而不会弄乱?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16553635/

相关文章:

jquery - 如何在 .animate 上添加输入宽度

WPF DataGridColumn 不允许我为自动调整列大小设置 ".width = double.NaN"。 "Value should not be infinity"错误?

html - 如何在不裁剪顶部或底部的情况下将图像放入容器中以保持图像质量

css - 为什么子级的宽度在显示时没有扩展到父级的宽度: table-cell?

html - 如何让两列 float 左 div 布局自动换行?

html - 在 3 列显示中叠瓦式 float

css - 为什么 css `width:30%` 工作不正确

html - 固定布局 + 广泛内容 = 表格?

php - 本地主机中的 XAMPP 延迟

css - 如何创建网格/平铺 View ?