如何使div擴展爲使用css的頁面寬度？

我有一個頁面有幾個div，有點像這樣：如何使div擴展爲使用css的頁面寬度？

<div id="div_one">blah blah blah</div> 
<div id="div_two">blah blah blah</div>

我希望他們水平居中，一個接一個和第二個擴展到頁面的寬度。

來源

2009-09-09 Paul Wicks

.first_one 
{ 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
} 

.second_one 
{ 
    width: 100%; 
}

然後在您的視圖，第一個你會做

<div class = "first_one"> 
... 
</div>

對於第二個，你會做

<div class = "first_one second_one"> 
... 
</div>

來源

2009-09-09 17:58:54 maksim

Div's默認爲其容器的整個寬度。

要水平居中內容，請在其上設置「text-align: center;」。如果他們在一個容器中，也可以在容器上使用「margin: auto」，這會將左右邊距設置爲自動將div對中。

來源

2009-09-09 17:57:57 womp

* set'text-align：center;'on them *這只是針對IE6的破解 – voyager 2009-09-09 18:04:21

我是指內容，而不是div本身。可悲的是，IE6仍然是瀏覽器共享的重要部分。 – womp 2009-09-09 18:17:47

難道你不是指'divs默認情況下是整個內容的寬度嗎？ – 2011-06-20 14:02:18

記住有上的元素默認邊距所以儘管它是100％，但仍然可能存在一些差距。您可以使用一些CSS將頁邊距重置爲0。

來源

2009-09-09 18:03:35 Nick

body{ text-align: center; } 

.first_one 
{ 
    width: 600px; /* Can be any width */ 
    margin:0 auto; 
} 

/* Reset text-align for child content */ 
.first_one, .second_one{text-align: left}

爲了在IE6中居中「first_one」，您需要在父元素上設置「text-align：center」。在這種情況下，我假設這是身體節點。此外，除非您指定寬度，否則margin：0 auto不起作用。

然後，您需要在子div上設置文本左對齊，以便它們中的內容不居中。

您不需要在「second_one」上指定寬度，因爲塊元素自然會展開以填充其父容器。此外，通過不設置寬度，瀏覽器將考慮任何可以應用於「second_one」的填充，邊距和邊框，而不會破壞佈局。

來源

2009-09-09 23:31:35 Kappers

如何使div擴展爲使用css的頁面寬度？

回答

相關問題