在兩個流體DIV之間固定px邊距

我正在處理一個包含兩個相鄰流體寬度分隔（每個寬度：50％）的佈局，這個分隔是一個容器寬度的80％。在兩個流體DIV之間固定px邊距

我想在左右50％divs之間有一個10px的餘量，但我需要整個程序集以適應80％體寬的容器。據我所知，減小左右DIV的寬度將有助於爲我提供10px中心邊距的空間，但這也意味着整個左邊DIV /右邊DIV/10px邊距裝配通常不會達到身體的80％寬度。

有沒有辦法重新計算左，右的DIV的寬度，使他們佔據累計身體寬度的80％時，有一個固定的利潤率10px的在他們之間，不管是什麼瀏覽器窗口大小來？不確定這是否適用於CSS。如果Javascript是實現它的唯一方法，那很好，但如果有一些隱藏的CSS技巧我錯過了，那將會很棒。

這裏是我的CSS：

#logoplace { 
width: 200px; 
height: 200px; 
background-color: red; 
margin-left: auto; 
margin-right: auto; 
} 

#navcontainer { 
height: 30px; 
width: 80%; 
background-color: white; 
margin: 5px auto; 
opacity: 0.7; 
} 

#navcontainer:hover { 
opacity: 1; 
} 

#rowone { 
width: 80%; 
height: 120px; 
background-color: white; 
margin: 5px auto; 
} 

#rowoneone { 
width: 50%; 
height: 120px; 
background-color: green; 
margin-right: 5px; 
float: left; 
} 

#rowonetwo { 
width: 50%; 
height: 120px; 
background-color: blue; 
margin-left: 5px; 
float: right; 
} 

html, body 
{ 
height: 100%; 
padding-left: 20px; 
padding-right: 20px; 
padding-top: 20px; 
padding-bottom: 20px; 
}

而我的HTML：

<div id="logoplace"> 
</div> 
<div id="navcontainer"> 
</div> 
<div id="rowone"> 
    <div id="rowoneone"> 
    </div> 
    <div id="rowonetwo"> 
    </div> 
</div>

最後這裏有一個JsFiddle顯示我得到的結果。右浮動的DIV越來越低，顯然是因爲我已經將浮動的DIV設置爲50％，然後添加了固定保證金。

任何幫助，非常感謝！

來源

2012-10-30 Marcatectura

下面是一種方法：http://jsfiddle.net/thirtydot/KX6eR/30/（我不得不添加一個額外的包裝，這不是很好...） – thirtydot

十三歲，仍然非常簡單 - 如果你不介意，加上這個答案，我可以接受它！ – Marcatectura

http://jsfiddle.net/thirtydot/KX6eR/30/

添加一個額外的包裝：

<div id="rowone"> 
    <div id="rowonewrapper"> 
     <div id="rowoneone"></div> 
     <div id="rowonetwo"></div> 
    </div> 
</div>

然後調整兩個內部div小號略：

#rowonewrapper { 
    margin-right: 10px; 
} 
#rowoneone { 
    width: 50%; 
    height: 120px; 
    background-color: green; 
    float: left; 
} 

#rowonetwo { 
    width: 50%; 
    height: 120px; 
    background-color: blue; 
    float: right; 
    position: relative; 
    left: 10px; 
}

來源

2012-11-08 10:43:07 thirtydot

如果你能一個元素添加到您的HTML，你可以做以下...

<div id="rowone"> 
    <div id="rowonepad"> 
    <div id="rowoneone"> 
    </div> 
    <div id="rowonetwo"> 
    </div> 
    </div> 
</div>

然後將下面的CSS

#rowone { 
    width: 80%; 
    overflow: hidden; 
} 
#rowonepad { 
    padding: 0 5px; 
} 
#rowoneone { 
    float: left; 
    width: 50%; 
    margin-left: -5px; 
} 
#rowonetwo { 
    float: right; 
    width: 50%; 
    margin-right: -5px; 
}

或者你可以使用box-sizing: border-box;屬性，去掉需要包裝

<div id="rowone"> 
    <div id="rowoneone"> 
    </div> 
    <div id="rowonetwo"> 
    </div> 
</div>

然後將下面的CSS

#rowone { 
    width: 80%; 
    overflow: hidden; 
} 
#rowoneone { 
    box-sizing: border-box; 
    float: left; 
    width: 50%; 
    padding-right: 5px; 
} 
#rowonetwo { 
    box-sizing: border-box; 
    float: right; 
    width: 50%; 
    padding-left: 5px; 
}

來源

2012-10-30 17:33:18

這似乎是一個很好的解決方案，但是我很擔心瀏覽器支持 - 爲盒大小的廣泛支持？ – Marcatectura

http://caniuse.com/css3-boxsizing –

保羅愛爾蘭似乎認爲它是非常安全：http://paulirish.com/2012/box-sizing-border-box-ftw/ – sheriffderek

根據瀏覽器支持，您可以使用新的盒子大小css聲明。 http://www.w3.org/TR/css3-ui/#box-sizing

來源

2012-10-30 17:38:30

如果您在使用邊界盒很舒服，第一次你的項目中的類型和類型「類型」的東西 - 這是我一直在做的事情當我們真的需要固定的排水溝寬度時。邊框是94％ - 但CSS3選擇器如：首先是IE 9以上。可能有一個polyfill？下面是關鍵部分，我不喜歡使用包裝 - 但它的工作原理。看到更清晰的圖片的鏈接。數學變得非常時髦，但是你可以使用盡可能多的列做你想要的。

http://codepen.io/sheriffderek

HTML

<div class="column-w"> 
    <div class="column main"> 

    [column01] 

    </div> 
</div> 

<div class="column-w"> 
    <div class="column sub"> 

    [column02] 

    </div> 
</div>

CSS

.column-w { 
    width: 50%; 
    float: left; 
} 

.column-w:first-of-type { 
    padding-right: 10px; 
} 

.column-w:last-of-type { 
    padding-left: 10px; 
}

來源

2013-05-17 05:17:22 sheriffderek

好吧，這是一個2歲的問題，但是，是的，我花了很長一段時間，直到我學會了使用

calc(X% [math operand] Xpx)

有跨瀏覽器的變體，如

-webkit-calc(...)

我不知道任何其他人。

我喜歡與額外的包裝上面的解決方案，但。這是一個美麗的黑客！：D

來源

2014-06-22 09:56:49

在兩個流體DIV之間固定px邊距

回答

相關問題