HTML / CSS：固定边距和流动宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5153302/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML / CSS : Fixed Margin & Fluid Width
提问by Adam
How should I make this with CSS:
我应该如何用 CSS 做到这一点：
I would like to have 2 divsor more and their widthshould be in percent, but the margin between the divs should be fixed, in this example 30px
我想要 2 个divs或更多，并且它们width应该在percent，但 div 之间的边距应该是固定的，在这个例子中30px
The problem for me is the margin between the two divs because I can put the divs into a bigger div and set left and right padding to 30px and thats ok, but what should I do with the margin between the two divs?
对我来说问题是两个 div 之间的边距，因为我可以将 div 放入更大的 div 并将左右填充设置为 30px 就可以了，但是我应该如何处理两个 div 之间的边距？
If I try to add for example to the first div margin-right:30px;then the width of the div will be 70% + 30pxwhat will be overall greater than 100% and the second div will fall down.
例如，如果我尝试添加到第一个 div，margin-right:30px;则div的宽度70% + 30px将整体大于 100%，而第二个 div 将下降。
So what is the solution for this?
那么有什么解决办法呢？
回答by thirtydot
Is this close enough?
这够近了吗？
HTML:
HTML：
<div id="container">
<div id="left"><div id="left2">leftgggg</div></div>
<div id="right">right</div>
</div>
CSS:
CSS：
#container {
margin: 0 30px 0 30px;
overflow: hidden;
background: #f3c
}
#left {
float: left;
width: 70%;
position: relative;
left: -30px;
}
#left2 {
height: 200px;
margin: 0 0 0 30px;
background: #ccc
}
#right {
height: 200px;
float: right;
width: 30%;
background: #666
}
回答by ahuth
Calc support is decent now, so you can use that to mix and match units. Using that, you can come up with something that works pretty well:
Calc 支持现在很不错，因此您可以使用它来混合和匹配单位。使用它，你可以想出一些效果很好的东西：
#a {
margin-left: 30px;
width: calc(70% - 30px - 15px);
}
#b {
margin-left: 30px;
margin-right: 30px;
width: calc(30% - 30px - 15px);
}
You may have to prefix calc with -webkit or -moz.
您可能需要在 calc 前面加上 -webkit 或 -moz。
The width of the first one is 70% minus the left margin (30px) and minus half the middle margin (15px). The second one is 30% minus the right margin (30px) and minus half the middle margin (15px).
第一个的宽度是 70% 减去左边距 (30px) 和减去中间边距 (15px) 的一半。第二个是 30% 减去右边距 (30px) 和减去中间边距 (15px) 的一半。
While the widths won't be exactly equal to 70% and 30%, you'll have a fluid layout with fixed margins.
虽然宽度不会完全等于 70% 和 30%，但您将拥有固定边距的流畅布局。
回答by Sonali Kar
I found a way to do this keeping the ratio of the widths of the containers exactly 70% : 30%. Try this, works for me...
我找到了一种方法来保持容器宽度的比例恰好为 70% : 30%。试试这个，对我有用...
HTML:
HTML：
<div id="page">
<div id="a"><div id="aWrap">This is 70% of the available space...</div></div>
<div id="b"><div id="bWrap">This is 30% of the available space...</div></div>
</div>
CSS:
CSS：
*{
margin:0;
padding:0;
}
#page{
margin:30px;
}
#a{
width:70%;
float:left;
}
#aWrap{
margin-right:15px;
background:#aaa;
}
#b{
width:30%;
float:right;
}
#bWrap{
margin-left:15px;
background:#ddd;
}
Best of luck!
祝你好运！
回答by Yasser
You can use the javascript onload and onresize functions. In each you first find the width of the container grid and then calculate the width of your 70pc and 30pc grids in pixels and set them via JS.
您可以使用 javascript onload 和 onresize 函数。在每个中，您首先找到容器网格的宽度，然后以像素为单位计算 70pc 和 30pc 网格的宽度，并通过 JS 设置它们。
For example use the following code in your onload and onresize functions for the page:
例如，在页面的 onload 和 onresize 函数中使用以下代码：
container_width = document.getElementById('container_box').style.width
width_70 = (container_width - 90) * 0.7
width_30 = (container_width - 90) * 0.3
document.getElementById('seventy_pc_box').style.width = width_70
document.getElementById('thirty_pc_box').style.width = width_30
回答by Jeff Parker
It may be obvious, and you've probably already twigged, but (70% + 30% + 30px) > 100%. Without some kind of calculative ability, this won't work, and CSS2 doesn't appear to have that ability. Javascript could do it, as another poster has suggested, and CSS 3 is due to add it, apparently.
这可能很明显，而且您可能已经使用过，但是 (70% + 30% + 30px) > 100%。没有某种计算能力，这是行不通的，而 CSS2 似乎没有这种能力。Javascript 可以做到，正如另一张海报所建议的那样，显然CSS 3将添加它。
Not that it's a solution to your original enquiry, but you can enforce a fixed width on the right hand container, and maintain fluidity on the left.
并不是说它是您最初查询的解决方案，但您可以在右侧容器上强制执行固定宽度，并在左侧保持流动性。
<div style="margin-left: 30px; float: right; width: 270px;">
<p>Content text ...</p>
</div>
<div style="margin-right: 300px;">
<p>Sidebar text ...</p>
</div>
The original commenter is correct though, your best bet is one or the other.
不过，原始评论者是正确的，您最好的选择是其中之一。
回答by Sotiris
Here my solution.
这是我的解决方案。
html
html
<div id="wrapper">
<div id="left"></div>
<div id="rightWrapper">
<div id="right"></div>
</div>
</div>
css
css
#wrapper {
margin:0 30px;
}
#left {
width:70%;
height:200px;
background:black;
float:left;
}
#rightWrapper {
margin-left:99px;
}
#right {
width:30%;
height:200px;
float:right;
background:grey;
}
回答by Pricey
Thirtydot has a nice answer (up vote from me) to adjust the left positioning of the div relative to its container, I would only suggest that it may need testing in certain browsers, such as older versions of Internet Explorer.
Thirtydot 有一个很好的答案（来自我的投票）来调整 div 相对于其容器的左侧位置，我只建议它可能需要在某些浏览器中进行测试，例如旧版本的 Internet Explorer。
Alternatively you could consider that adjusting a left position by a fixed amount is more confusing than just applying a different width.
或者，您可以考虑以固定量调整左侧位置比仅应用不同的宽度更令人困惑。
Your also asking for a fluid width and a fixed margin, overall this is no longer a fluid layout... your 30px will look the same in a large or small resolution.. but your widths will change, either fix the widths to pixels or set the margin to a percentage (Maybe try using max-width for some browsers too for bigger resolutions). Newer browsers also adjust a pixel layout when increasing the text/zoom size, older browsers require use of EMs for text size changes.
您还要求流体宽度和固定边距，总体而言这不再是流体布局……您的 30px 在大分辨率或小分辨率下看起来都相同……但是您的宽度会改变，将宽度固定为像素或将边距设置为百分比（也许尝试对某些浏览器使用 max-width 以获得更大的分辨率）。较新的浏览器在增加文本/缩放大小时也会调整像素布局，较旧的浏览器需要使用 EM 来更改文本大小。
example with percentages and padding:
百分比和填充示例：
#container {
margin: 0 8% 0 8%;
overflow: hidden;
background: #f3c
}
#left {
float: left;
width: 62%;
position: relative;
padding-right: 8%;
}
回答by Marcel
Yeah, my solution was similar to others. A #wraphas 30pxpadding, #mainand #sidehave their percentages set and floated left and right respectively. #mainhas an extra <div>inside it with 30pxof right margin.
是的，我的解决方案与其他解决方案类似。A#wrap有30px填充，#main并且#side设置了它们的百分比并分别向左和向右浮动。里面#main有一个额外的右边距。<div>30px
http://jsfiddle.net/Marcel/FdMFh/embedded/result/
http://jsfiddle.net/Marcel/FdMFh/embedded/result/
Works fine in all the modern browsers I have installed (Chrome, Firefox, Safari, Opera, IE9 RC), I'm sure it'll break down somewhere older but should be fixable.
在我安装的所有现代浏览器（Chrome、Firefox、Safari、Opera、IE9 RC）中都能正常工作，我相信它会在较旧的地方出现故障，但应该可以修复。
