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

Question

我应该如何使用CSS:

我希望有两个divs或更多它们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

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