HTML / CSS：全寬問題
[英]HTML/CSS: Problem with full width
問題描述
請查看此頁面： http : //uploads.dennismadsen.com/fullwidth.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="da-DK">
<head>
<title></title>
</head>
<body style="background-color:#e0e0e0;color:#fff;">
<div style="position:absolute;width:100%;">
<div style="background-color:#000;">
<div style="width:800px;margin:0px auto;text-align:right;">Container width a width of 1500px</div>
</div>
</div>
</body>
</html>
內部div的寬度為800px，如果窗口大於800px，則應水平居中。 嘗試在小於800像素的瀏覽器窗口中查看頁面。 例如，寬度約為500像素。 當您向右滾動時，黑色背景的寬度不是完整的。 為什么？
3 個解決方案
解決方案1
3 已采納 2011-09-02 08:57:07
<div style="background-color:#000;">位於<div style="position:absolute;width:100%;"> ，其寬度等於屏幕的寬度。 因此， <div style="background-color:#000;">寬度也等於屏幕的寬度。 如右圖所示，該div設置了黑色背景，背景寬度也等於屏幕的寬度，而不是更多。 因此它不會擴展到右邊。
UPDATE
您只能使用兩個div：
<div style="background-color:#000;">
<div style="width:800px;margin:0px auto;text-align:right;">Container width a width of 1500px</div>
</div>
對不起，也不起作用。 將其作為無效樣本留在此處以供參考。
更新2
現在可以使用的變體：
<div style="background-color:#000;min-width:800px;width:100%">
<div style="width:800px;margin:0px auto;text-align:right;">Container width a width of 800px</div>
</div>
解決方案2
2 2011-09-02 09:10:22
這有效:)
<body style="background-color:#e0e0e0; color:#fff;">
<div style="position:absolute; width:100%;">
<div style="background:#000; width:800px; margin:0px auto; text-align:right;">Container width a width of 1500px</div>
</div>
</body>
解決方案3
1 2011-09-02 12:38:09
我不確定我是否完全理解這個問題，但是我想您正在問的是將對象居中而不使其小於800 px。 我要做的是先創建一個容器div，然后再創建內部div：
<div style="width:100%; min-width:800px; background-color:#000;">
<div style="background-color:#fff; width:800px; margin:auto;">
</div>
</div>
第一個div是可擴展屏幕整個長度但不小於800像素的容器，第二個div是相關的div，設置的寬度為800 px，並且將邊距設置為auto時應使其居中在容器div中
標頭不是全角-HTML / CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.