响应式布局的固定边距？答案

【问题标题】：Fixed margins on a responsive layout?响应式布局的固定边距？
【发布时间】：2012-08-16 00:19:24
【问题描述】：

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

列宽/总宽度=宽度%

高度是固定的。

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

代码如下所示：

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。不用了。

我是想一边吃蛋糕一边吃，还是有办法做到这一点而没有缺点？

【问题讨论】：

您需要哪些浏览器支持？
不需要花哨； Safari、Opera、Chrome 和 Firefox，那么单独的 IE 方法应该没问题。

标签： html css responsive-design

【解决方案1】：

我认为解决此问题的最佳方法是使用负边距和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; }

结果：

现场演示

如果您想看到它的实际效果，我创建了一个Fiddle。

【讨论】：

【解决方案2】：

使用 :before / :after

:before 和 :after 伪类让我很开心，用一个矩形覆盖了每个排水沟的一半：http://jsfiddle.net/PhilippeVay/Zxn8E/11/（注意结束标签的位置，以防止内联块元素之间出现任何空白）

兼容性：IE8+ 和 IE7 及更低版本不理解这些伪代码。

带有灵活框布局模块

这个 CSS3 模块将让您拥有等宽的列，里面有排水沟，外面没有，这正是您想要实现的。几个月内语法改变了两次，所以我还没有看新的。
Compatibility on caniuse.com（没有 IE9-，没有 Opera）

【讨论】：

我会接受您的回答，因为回答的正是我所要求的。但是，我确实有一些问题（从不快乐）。在您的第一个示例中，每个 div 都带有一个“位置”。如果我决定在下面添加更多行只是为了好玩，毕竟这是流畅的设计，没有 div 会希望在同一个位置被逼到角落。东西在流动，流动！那么你的第二个例子很有吸引力，但它与需要单独设计的 IE sub 7 和 Opera 不兼容。我只是觉得那里一定有更简单的东西。
我的同事想到了 border-spacing 与 CSS 表格（非常适合每个块之间的白色边框，因为在这种情况下没有边距，并且填充将具有相同的颜色背景）。不过还是IE8+。 IE7- ：忘记 100% 的宽度并使用 inline-block。或 HTML 表格（在某些情况下它与有缺陷的浏览器或语义兼容）。编辑：网格布局仅适用于 IE10（目前没有其他浏览器）

【解决方案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>

【讨论】：

如果我让边框作为边距，有两个限制：1. 如果我愿意，我没有选择自己的边框样式，2. 只有在“div”的背景是透明的，“body”的背景是一种单色。我解决了上面的边界困境。