CSS 3浮动div - 左中中间，彼此之间有边距答案

【问题标题】：CSS 3 floating divs - left center middle with margin between each otherCSS 3浮动div - 左中中间，彼此之间有边距
【发布时间】：2011-12-23 13:12:53
【问题描述】：

我正在尝试制作 3 个浮动 div - 左、中和右，它们之间有空格（边距）。例如：

div 宽度为 245px，空间为 6px，div 为 246px，空间为 6px，div 为 245px（总共 748px）。

我发现的方法是： 748px 的容器，左浮动 div，绝对定位的 div，margin:0 251px; (245+6) 和浮动右 div。

它有效（但在 IE6 中无效），所以我想知道是否有其他方法不使用绝对位置。我不想使用 3 个浮动的左侧 div 和中间的带边距的 div，因为当你缩小结构时，结构不是全宽。（因此你必须使用 1 个向左浮动和 1 个向右浮动。）

希望您能理解并提供帮助。

谢谢！

【问题讨论】：

标签： css

【解决方案1】：

在你的网页中使用这些东西 .mainDiv { 宽度：748px；浮动：左；
} .leftDiv{float:left;width:245px;padding-right:6px;} .centerDiv{float:left;width:246px;padding-right:6px;} .rightDiv{float:right;width:245px;}

将此样式表用于您的 div 结构给出样式表中的类名

【讨论】：

填充与边距相同，但会改变 div 的宽度/高度 - 没有帮助。
yes bcz 一旦你修复了主 div 的宽度，你就必须计算你的子 div 宽度 + 填充/边距，它必须小于或等于父 div 宽度

【解决方案2】：

使用 CSS 网格系统。

例如 http://cssgrid.net/ 或其他类似 http://960.gs、Twitter Bootstrap、Blueprint CSS.. 的选择。

例如，Twitter Bootstrap 支持固定宽度布局和流动布局。另一方面，当您重新调整浏览器窗口的尺寸时，CSSGrid 的缩放效果非常好。

您可以很快学会如何使用网格，它将极大地帮助您保持布局整洁。

【讨论】：