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.