填滿屏幕寬度的div居中Div

這可能嗎？ Div2專門定位於Div1內部。現在唯一的事情是我想Div2跨越整個屏幕的寬度，而不是跨越Div1的寬度。填滿屏幕寬度的div居中Div

|----------------------------------------------------------| 
|      Browser       | 
|               | 
|               | 
|               | 
|               | 
|   --------------------------------    | 
|   |  Div1 (relative)  |    | 
|   |        |    | 
|   |        |    | 
|-----------|------------------------------|---------------| 
|   |   Div2    |    | 
|   |(currently absolute & in Div1)|    | 
|-----------|------------------------------|---------------| 
|   |        |    | 
|   |        |    | 
|   |        |    | 
|   |        |    | 
|   --------------------------------    | 
|               | 
|               | 
|               | 
|----------------------------------------------------------|

這是CSS我現在有：

.page{ 
     height: 300px; 
     width: 400px;} 

.Div1{ 
    float:left; 
     left: 50%; 
    height:200px; 
    width:100px; 
    position:relative; 
     background-color: red; 
} 

.Div2{ 
    position:absolute; 
    top:21px; 
    width:100%; 
    height:24px; 
     background-color: yellow; 
}

這裏的jsfiddle我目前的問題：http://jsfiddle.net/vBqgT/21/ 感謝。

來源

2012-11-13 Dave

你並不真的需要做CSS3實現這一目標。由於div2位於div1之內，因此它的寬度受到div1的限制。因此，爲了使div2比div1寬：

.Div2{ 
    width:150%; 
}

你也可以這樣做：

.Div2{ 
    left: -25%; 
}

調整其中div2開始左邊緣。

請參閱http://jsfiddle.net/jsxvK/。

但如果主要目標是爲div2拿在身上（page你的情況）的特性，考慮將標記爲div2內page，但內部沒有div。然後調整頂部位置div2以在文檔中上下移動它。

來源

2012-11-13 03:02:58 KatieK

這種方式在我的網站上效果最好。我沒有想過使用這些百分比。謝謝！ – Dave

當然，你可以做到這一點，但如果你讓div2成爲div1的孩子，div2的位置就是相對於div1給出的（因此left：0應該使它左對齊div1）。如果你不想把它放在相對於div1的地方，你可以讓div2成爲div1的兄弟，或者你可以從div1中刪除position: relative;。另一種選擇是在div2上使用固定位置。所有這些都有副作用，可能並不理想...

有時需要使用JavaScript來得到你想要的。比如說，你想在一個軸上對齊div1，在另一個軸上對齊。然後可能需要使用腳本。

來源

2012-11-13 01:35:59

試試這個CSS：

.page{ 
     height: 300px; 
     width: 100%; 
    border: 0px solid red; 
} 

.Div1{ 
    margin: 0 auto; 
    height:200px; 
    width:100px; 
    background-color: red; 
} 

.Div2{ 
    position:absolute; 
    top:21px; 
    width:100%; 
    height:24px; 
    background-color: yellow; 
    left:0; 
}

以下是演示：http://jsfiddle.net/ongisnade/SqG3c/

來源

2012-11-13 01:49:16 Fredy

這在演示中效果很好，但是當我把它放在我自己的頁面中時，KatieK的效果更好。我希望我能接受你的答案。 – Dave

填滿屏幕寬度的div居中Div

回答

相關問題