HTML / CSS：固定边距和流体宽度

Question

我应该如何用 CSS 做到这一点：

我想要 2 个 div 或更多，它们的 width 应该是 percent，但是之间的边距div 应该是固定的，在本例中 30px

对我来说问题是两个 div 之间的边距，因为我可以将 div 放入更大的 div 中并设置为左侧右内边距为 30px 就可以了，但是我应该如何处理两个 div 之间的边距呢？

例如，如果我尝试添加到第一个 div margin-right:30px; ，那么 div 的宽度将为 70% + 30px ，总体大于 100 % 并且第二个 div 会掉下来。

那么解决这个问题的办法是什么呢？

Answer 1

这足够接近了吗？

现场演示

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

Calc 支持现在很不错，因此您可以使用它混合搭配单元。使用它，您可以想出一些效果很好的东西：

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

您可能必须在 calc 前加上 -webkit 或 -moz 前缀。

第一个的宽度是 70% 减去左边距 (30px) 并减去中间边距的一半 (15px)。第二个是 30% 减去右侧边距 (30px) 并减去中间边距的一半 (15px)。

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

Answer 3

我找到了一种方法来保持容器宽度的比例恰好为 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 4

这可能很明显，而且您可能已经意识到了，但是 (70% + 30% + 30px) > 100%。如果没有某种计算能力，这是行不通的，而 CSS2 似乎不具备这种能力。 Javascript 可以做到这一点，正如另一位海报所建议的，CSS 3 由于添加了它< /a>，显然。

这并不是说它是您最初查询的解决方案，但您可以在右侧容器上强制执行固定宽度，并保持左侧容器的流动性。

<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 5

这是我的解决方案。

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 6

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

，右侧边距为 30px。

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

工作正常在我安装的所有现代浏览器（Chrome、Firefox、Safari、Opera、IE9 RC）中，我确信它会在较旧的地方崩溃，但应该是可以修复的。

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

您可以使用 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