Question

简而言之，我正在开发一个包含列和行的响应式Web布局。每个列宽设置与预定义的总宽度相关：

列宽/总宽度=宽度％

并且高度是固定的。

现在问题是，我希望内容宽度是流动的，但边距和填充是固定宽度，如下所示。

enter image description here

代码看起来像这样：

HTML

<body>
   <div id="left">Left</div>
   <div id="middle">Middle</div>
   <div id="right">Right</div>
</body>

CSS

div {
   float: left;
   padding: 0.5em;
   box-sizing: border-box;
   width: 33.3333333333333%; height 5em; line-height: 5em; text-align: center;
}    

#left {
   background-color: red;
}

#middle {
   background-color: green;
}

#right {
   background-color: blue;
}

http://jsfiddle.net/langoon/Zxn8E/2/

我已经想到了一些解决方案，但似乎没有一个能够满足我的需求：

将'box-sizing'设置为'margin-box'。大多数浏览器都不支持。
使用边框代替边距。我可能想要这个边框并在以后区别化。
将每个框嵌套在外部'div'中。我更喜欢保持DOM的元素数量至少处理。
按照此处的建议设置负边距 Fluid column layout with fixed pixel margins between them?。似乎要求每行包装'div'，这可能会给我带来麻烦。
JavaScript。不，谢谢。

我是想尝试吃蛋糕并同时吃它还是有办法没有缺点？

Answer 1

使用：在/之后

我对:before和:after伪有兴趣，用一个矩形覆盖每个排水沟的一半：http://jsfiddle.net/PhilippeVay/Zxn8E/11/（注意结尾标记的位置，以防止内联块之间的任何空格元素）

兼容性：IE8 +作为IE7和较小的不理解这些伪。

使用灵活的盒子布局模块

这个CSS3模块可以让你有相同宽度的列，里面有天沟，没有外面，正是你想要实现的。因为语法在几个月内改变了两次，所以我还没有看过新的语法 Compatibility on caniuse.com（没有IE9-，没有Opera）

Answer 2

我认为解决此问题的最佳方法是使用负边距和box-sizing属性。一个简单的例子：

HTML：

<ul>
    <li><div class="red">Red</div></li>
    <li><div class="green">Green</div></li>
    <li><div class="blue">Blue</div></li>
</ul>

CSS：

ul
{
    list-style: none;
    margin: 0 0 0 -15px; /* Note the negative margin */
    padding: 0;
    overflow: hidden;
}

li
{
    float: left;
    width: 33.3333%;
    padding: 0 0 25px 15px;
    box-sizing: border-box;
}

/* Some decorations */
div { padding: 25px 0; color: white; text-align: center; }
div.red { background: red; }
div.green { background: green; }
div.blue { background: blue; }

结果：

enter image description here

现场演示

如果你想看到这个，我已经创建了一个Fiddle。

Answer 3

尝试边境路线：

http://jsfiddle.net/Zxn8E/3/

div {
    float: left;
    box-sizing: border-box;

    border-top:0.5em solid cyan;
    border-bottom:0.5em solid cyan;
    border-left:0.5em solid cyan;

    width: 33.3333333%; height 5em; line-height: 5em; text-align: center;
}    

div.last{ border-right:0.5em solid cyan; } 


<body>
  <div id="left">Left</div>
  <div id="middle">Middle</div>
  <div id="right" class="last">Right</div>
</body>

响应式布局上的固定边距？

3 个答案:

HTML：

CSS：

结果：

现场演示