避免容器分區

假設你有一個網站，並有一個花哨的粉紅色標題，它橫跨你的屏幕。標題內有一些需要居中的文本，並且有960像素的固定寬度區域。避免容器分區

--------------------------- 
| x | hello | x | 
|       | 
| y | hi  | y | 
---------------------------

X =粉紅色背景的行 Y =黃色背景行

是否有人有一個最新的CSS（無JS）解決方案駁回div容器的需求往往只是用於填充？

HTML：

<header> 
    <div> 
     hello 
    </div> 
</header> 
<footer> 
    <div> 
     hi 
    </div> 
</footer>

CSS：

header { 
    background: pink; 
} 
header > div { 
    width: 960px; 
    margin:0 auto; 
}

是否有人有一個解決方案，或許真的有假之前和之後？所以，你可以只寫漂亮的html：

<header>hello</header> 
<footer>hi</footer>

，並修復它所有在CSS。

這是一個基本的例子，重點是;我常常只是爲了佈局而使用div，大部分是填充。當然，我可以設置獨立的背景來完成這個訣竅，但是我正在討論將這些全部集中在一起，因爲可能有相同的問題和另一個背景。與主要內容相同，等等。

希望有這樣的：

header{ 
    background: pink; 
    padding: 100%-960px; 
}

這將「做的伎倆」和規模調整視後。

來源

2011-10-01 Sanne

編輯：對不起後在第一篇文章摸索了一下。（Markdown正則表達式在我發現的代碼塊之前需要一個空的換行符） – Sanne

通常我只是使用多個容器div和一個容器類...就像hellow和hi都會在一個div中使用「包裝類」，而x和y都是100％寬度的wrapper-of-包裝divs。

但你的目的是爲了避免包裝的div ...然後我不會進入細節如何，你可以用4周包裝的div :)

我想你應該看看這些鏈接完成此任務：

來源

2011-10-01 21:21:26 tmsimont

謝謝你的回答。是的，我現在就是這樣做的，只需在960px上編寫一個包裝類，然後在所有容器div上重新使用它。但就像我說的那樣，還有很多情況，比如側邊欄，你需要一個固定寬度的內容和一個固定寬度的背景......（我沒有看到更少或更糟的情況）。如果有一個新的CSS屬性「容器寬度」，這將是很酷，這將是超級方便。 – Sanne

避免容器分區

回答

相關問題