HTML / CSS：固定邊距和流體寬度

Question

我應該如何使用CSS：

我想有2個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

我找到了一種方法來保持容器寬度的比例恰好為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支持現在很不錯 ，所以你可以使用它來混合和匹配單位 。 使用它，你可以想出一些非常好的東西：

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

原來的評論者是正確的，你最好的選擇是一個或另一個。

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）中運行良好，我敢肯定它會在較舊的地方發生故障，但應該可以修復。