11

我应该如何使用 CSS 制作这个：

我想有 2 个divs或更多，它们width应该在 中percent，但 div 之间的边距应该是固定的，在这个例子中30px 流体分区

对我来说，问题是两个 div 之间的边距，因为我可以将 div 放入更大的 div 并将左右填充设置为 30px，这没关系，但是我应该如何处理两个 div 之间的边距？

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

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

4

8 回答 8

11

这足够接近吗？

现场演示

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
}
于 2011-03-01T10:53:38.997 回答
3

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%，但您将拥有具有固定边距的流畅布局。

于 2013-03-25T20:27:05.013 回答
1

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

祝你好运！

于 2013-03-12T06:11:35.870 回答
0

您可以使用 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
于 2011-03-01T10:49:45.847 回答
0

这可能很明显，而且您可能已经抽过，但是 (70% + 30% + 30px) > 100%。没有某种计算能力，这是行不通的，而且 CSS2 似乎没有这种能力。正如另一位海报所建议的那样，Javascript 可以做到这一点，显然，CSS 3将添加它。

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

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

不过，原始评论者是正确的，您最好的选择是其中之一。

于 2011-03-01T10:53:20.693 回答
0

这是我的解决方案。

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/

于 2011-03-01T11:03:40.177 回答
0

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

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

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

带有百分比和填充的示例：

#container {
    margin: 0 8% 0 8%;
    overflow: hidden;
    background: #f3c
}
#left {
    float: left;
    width: 62%;
    position: relative;
    padding-right: 8%;
}
于 2011-03-01T11:04:14.767 回答
0

是的，我的解决方案与其他解决方案相似。A#wrap有30px填充，#main并#side设置它们的百分比并分别向左和向右浮动。里面#main有一个额外的右边距。<div>30px

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

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

于 2011-03-01T11:07:03.370 回答