在响应式布局上固定边距？ [英] Fixed margins on a responsive layout?
问题描述
列宽/总宽度=宽度％
并且高度是固定的。
现在问题是，我想要内容宽度为流动，但边距和填充为固定宽度，如下所示。
这段代码看起来像这样：
HTML
< body>
< div id =left> Left< / div>
< div id =middle>中间< / div>
< div id =right> Right< / div>
< / body>
CSS
div {
float：left;
填充：0.5em;
box-sizing：border-box;
width：33.3333333333333％;身高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的元素数量保持在最低限度。
- 按照此处的建议设置负边距 它们之间具有固定像素边界的流体柱布局？。似乎每行都需要包装div，这可能会给我带来麻烦。
- JavaScript。不用了。
我是否尝试让我的蛋糕在同一时间吃，或者有没有办法做到这一点没有缺点？
With：before /：after
我对：和：之后的每个伪元素感兴趣，用矩形覆盖每个阴影线的一半： http://jsfiddle.net/PhilippeVay/Zxn8E/11/ （注意结尾标签是，阻止内嵌块元素之间的任何空格）
兼容性：IE8 +为IE7，较少不了解这些伪项。
使用灵活框布局模块
这个CSS3模块可以让你有相同宽度的列，里面有阴影线，没有阴影，正是哟你想实现。由于语法在几个月内改变了两次，所以没有小提琴，我还没有看过新的。
caniuse.com上的兼容性（不支持IE9，不支持Opera）
Simply put, I am working on a responsive web layout with columns and rows. Each column width is set relevant to a predefined total width:
column width / total width = width %
and the height is fixed.
Now the problem is, I want the content width to be fluid but the margin and padding to be of fixed width as below.
The code looks something like this:
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/
I have thought of some solutions but none of them seem to do what I am looking for :
- Set 'box-sizing' to 'margin-box'. Not supported in most browsers.
- Instead of margins, use borders. I might want that border and style it differently later.
- Nest each box in an outer 'div'. I prefer to keep the number of elements for the DOM to process at a minimum.
- Set negative margins as suggested here Fluid column layout with fixed pixel margins between them?. Seems to require an wrapping 'div' for each row and that might pose problems for me.
- JavaScript. No thanks.
Am I trying to have my cake and eat it at the same time or is there a way to do this without the drawbacks?
With :before / :after
I had fun with :before and :after pseudos, covering half of each gutter with a rectangle: http://jsfiddle.net/PhilippeVay/Zxn8E/11/ (note where the ending tags are, to prevent any whitespace between inline-block elements)
Compatibility: IE8+ as IE7 and lesser don't understand these pseudos.
With Flexible Box Layout Module
This CSS3 module will let you have equal width columns with gutter inside and none outside, exactly what you want to achieve. No fiddle as the syntax changed twice in a few months, I still haven't looked at the new one.
Compatibility on caniuse.com (no IE9-, no Opera)
这篇关于在响应式布局上固定边距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
