Question

我应该如何使用CSS：

我希望有divs个或更多width，percent应位于30px，但div之间的边距应该是固定的，在此示例margin-right:30px;中 Fluid Divs

我的问题是两个div之间的余量，因为我可以把div放到一个更大的div中，并将左右填充设置为30px，这没关系，但是我应该怎样处理两个div之间的边距？ / p>

如果我尝试添加例如第一个div 70% + 30px，那么div的宽度将为{{1}}，总体上将大于100％，第二个div将会下降。

那么解决方案是什么？

Answer 1

这足够接近吗？

Live Demo

<强> HTML：

<div id="container">
    <div id="left"><div id="left2">leftgggg</div></div>
    <div id="right">right</div>
</div>

<强> 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
}

Answer 2

我找到了一种方法来保持容器宽度的比例恰好为70％：30％。试试这个，对我有用......

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：

*{
    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;
}

祝你好运！

Answer 3

Calc support is decent now，因此您可以将其用于mix and match units。使用它，你可以想出一些非常好的东西：

http://jsfiddle.net/CYTTA/1/

#a {
    margin-left: 30px;
    width: calc(70% - 30px - 15px);
}

#b {
    margin-left: 30px;
    margin-right: 30px;
    width: calc(30% - 30px - 15px);
}

您可能必须使用-webkit或-moz前缀calc。

第一个的宽度是70％减去左边距（30px）和减去中间边缘的一半（15px）。第二个是30％减去右边距（30px）和减去中间边缘的一半（15px）。

虽然宽度不会完全等于70％和30％，但您将拥有固定边距的流畅布局。

Answer 4

您可以使用javascript onload和onresize函数。在每个中，首先找到容器网格的宽度，然后以像素为单位计算70pc和30pc网格的宽度，并通过JS设置它们。

例如，在页面的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

Answer 5

这可能是显而易见的，而且你可能已经很好了，但是（70％+ 30％+ 30px）＆gt; 100％。如果没有某种计算能力，这将无效，CSS2似乎没有这种能力。 Javascript可以做到，正如另一张海报所暗示的那样，而CSS 3显然是due to add it。

并非它是您原始查询的解决方案，但您可以在右侧容器上强制固定宽度，并保持左侧流动性。

<div style="margin-left: 30px; float: right; width: 270px;">
    <p>Content text ...</p>
</div>
<div style="margin-right: 300px;">
    <p>Sidebar text ...</p>
</div>

原来的评论者是正确的，你最好的选择是一个或另一个。

Answer 6

这是我的解决方案。

<强> HTML

<div id="wrapper">
    <div id="left"></div>
    <div id="rightWrapper">
        <div id="right"></div>
    </div>
</div>

<强> 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;
}

演示： http://jsfiddle.net/GEkG7/1/

Answer 7

Thirtydot有一个很好的答案（我的投票）来调整div相对于其容器的左侧定位，我只建议它可能需要在某些浏览器中进行测试，例如旧版本的Internet Explorer。

或者你可以考虑将左侧位置调整一个固定的数量比仅应用不同的宽度更令人困惑。

你还要求流体宽度和固定边距，总体来说这不再是流畅的布局......你的30px在大或小的分辨率下看起来都一样..但你的宽度会改变，要么修正宽度像素或将边距设置为百分比（也许尝试使用某些浏览器的最大宽度以获得更大的分辨率）。较新的浏览器在增加文本/缩放尺寸时也会调整像素布局，较旧的浏览器需要使用EM来更改文本大小。

百分比和填充的示例：

#container {
    margin: 0 8% 0 8%;
    overflow: hidden;
    background: #f3c
}
#left {
    float: left;
    width: 62%;
    position: relative;
    padding-right: 8%;
}

Answer 8

是的，我的解决方案与其他解决方案类似。 #wrap有30px填充，#main和#side的百分比设置并分别左右浮动。 #main内部有一个额外的<div>，右边距为30px。

http://jsfiddle.net/Marcel/FdMFh/embedded/result/

在我安装的所有现代浏览器（Chrome，Firefox，Safari，Opera，IE9 RC）中运行良好，我确信它会在较旧的地方发生故障，但应该可以修复。

HTML / CSS：固定保证金＆amp;流体宽度

8 个答案: