具有固定填充/邊距的CSS液體佈局

我想知道是否有人知道如何將像素寬度填充或邊距合併到流體柱設計中，而不需要額外的html標記。具有固定填充/邊距的CSS液體佈局

爲了進一步說明，考慮一個簡單的HTML/CSS佈局像這樣的：

<style> 
    .cont{width:500px;height:200px;border:1px solid black;} 
    .col{float:left;} 
    #foo{background-color:blue;width:10%;} 
    #bar{background-color:yellow;width:30%;} 
    #baz{background-color:red;width:60%;} 
</style> 
<div class="cont"> 
    <div class="col" id="foo">Foo</div> 
    <div class="col" id="bar">Bar</div> 
    <div class="col" id="baz">Baz</div> 
</div>

這將顯示正確（不考慮可以採取照料的雜CSS顯示錯誤）。但是，一旦向col類中添加了一個10px填充，浮動內容將不再以內聯方式顯示。如果您想將3px邊框放到col類中，也是一樣。我已經看到了css技術，人們將使用負邊距來反轉從框模型創建的添加像素，但它仍不會減小寬度。所以基本上，我想要的是一種技術，可以讓我保持10％的寬度，但10％的10％是填充（或保證金或不是）。

來源

2010-07-13 Azmisov

沒有「額外的html標記」，沒有CSS3的解決方案。 width不包括填充和邊框，這只是規範的性質。如果你想避免負邊距，那麼在每個div中只需要一個額外的包裝。 CSS的：

.padder {border: 3px solid green; padding: 10px;}

的HTML：

<div class="cont"> 
    <div class="col" id="foo"><div class="padder">Foo</div></div> 
    <div class="col" id="bar"><div class="padder">Bar</div></div> 
    <div class="col" id="baz"><div class="padder">Baz</div></div> 
</div>

對於CSS3的兼容性，查看使用box-sizing bobince的答案。

來源

2010-07-13 17:13:12 ScottS

我害怕有人會說這是不可能的。我只需要確認，謝謝！ – Azmisov 2010-07-13 18:34:06

另一種選擇是手動計算寬度/邊距/填充。

這是可能的，因爲容器具有固定的寬度。

來源

2010-07-13 17:16:57

我認爲既然提到了「流體柱設計」，那麼固定的容器「寬度」更多用於演示目的。但如果情況並非如此，那麼我同意davyM。 – ScottS 2010-07-13 17:21:38

-1

救自己一噸的問題，並檢查了960個網格（960.gs），藍圖（http://www.blueprintcss.org/）或YUI（http://developer.yahoo.com/yui/grids/）都存在這個問題制定了，讓你簡單地定義在網格的百分比（或數量960的情況），其餘的工作都是爲你完成的。 YUI和960甚至有一臺發電機，所以你不必做這項工作。作爲額外的好處，這些CSS框架中的一些具有「重置」css「重置」，以「解除」IE缺陷並標準化字體，間距等，這些驅動我們UI用戶密友。

我最近爲一家大型國際銀行做了數千個不同設計的網頁的法規合規性更新。我們一開始就在YUI上進行了標準化，而且我真的很喜歡「網格」部分，因爲它易於部署。它每天處理有100萬以上獨特的網站，不會出現明顯的延遲。一旦你習慣了它的工作方式，你可以在幾分鐘內完成一個網站的佈局，而不必擔心浮動，填充等問題。在我個人的工作中，出於類似的原因，我使用了Blueprint和960。

來源

2010-07-13 17:44:52 bpeterson76

是的，如果你想讓你的佈局依賴於你的標記，完全忽略了CSS佈局的要點，並且基本上還原爲表格的方式，那麼CSS框架是一個很好的選擇。另外作爲獎勵大多數他們不能做液體佈局。哦，什麼進展。 – bobince 2010-07-13 17:47:57

YUI特別處理液體沒有任何問題。就像簡單的例子，你可以使用百分比而不會失敗。 – bpeterson76 2010-07-13 17:48:03

我已經看過，謝謝。但我正在爲我的公司開發自己的網站IDE。比較而言，那裏的許多發電機嚴重受限。因爲他們只專注於一種設計/設計類型。 – Azmisov 2010-07-13 18:32:14

您可以使用box-sizing來改變width的含義，使其包含填充（和邊界 - 有點像怪異模式中的盒子模型，沒有其他缺點）。

box-sizing是一個proposed CSS3風格，很不幸意味着它不適用於較老和晦澀的瀏覽器，它仍然需要在某些瀏覽器上加前綴。

.col{ 
    float:left; padding: 10px; 
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; 
}

更重要的是，它在IE8之前的IE中不起作用。如果您不想通過將這些瀏覽器扔進怪癖模式來進行補償，並且您確實不想這樣做，您可以嘗試其中一種嘗試在IE6-7上實現box-sizing的修復腳本/行爲。

如果這還不夠，您將不得不回退到Scott引用的包裝方法。至少這將在任何地方都有效。

無論使用哪種方式，請小心使用百分比加上100％和液體佈局的浮動。如果像素寬度不能很好地被你使用的百分比所分割，你會變得圓滑。 WebKit通常會向下滾動，這會使您的全寬度有一個像素或兩個害羞; IE6-7將圓整到最近，如果你不走運可能會讓你一個或兩個像素過度，導致你的浮游物意外地包裹。

來源

2010-07-13 18:01:04 bobince

具有固定填充/邊距的CSS液體佈局

回答

相關問題