我计划创建背景横跨浏览器宽度的轮播。
为此，我设置了 margin:0; padding:0; 在正文中，并将跨越背景的 div 设置为 width:100%。我选择它是因为它包含另一个 div，它有一个左右边距:auto；使第二个 div 居中在 div 中，跨越浏览器。
我在尝试将背景图像添加到跨越浏览器宽度的 div 时遇到问题。当我使用 background-repeat:repeat-x; 时，它仍然只是浏览器最左侧的一个 550x1 像素的条子。它不重复。我认为这是由于 100% 的宽度。如果我放弃 100% 的宽度，我会遇到内部 div 被强制向右或向左的问题，具体取决于所使用的显示器的分辨率。我不希望这种情况发生。
有人知道我可以实现/模拟 100% 宽度并仍然使用 background-repeat:repeat-x; 的方法吗？
编辑，我使用 2 个 div，因为我正在应用 silverlight，并且想将它以艺术的方式放置在屏幕上。这是我的代码，它可能使我当时正在做的事情更有意义。如果您仍然相信 1 个 div 比 2 个更好，请告诉我我错了，但这是代码。它非常简单，因为很多事情都将在 silverlight 中完成，或者至少我认为它会有些简单，但事情就是这样。
HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="imd_data_Home" %>
<!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">
<head runat="server">
<title>Home</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id=NavContainer>
<div id="Navigation">
<img src="img_data/dem_Logo.png" id="Logo"/>
</div>
</div>
<div id="Carousel">
<div id="SilverlightContainer">
</div>
</div>
</body>
</html>
CSS
body
{
margin:0;
padding:0;
background-color:#000061;
}
#NavContainer
{
width:900px;
margin-left:auto;
margin-right:auto;
}
#Navigation
{
height:75px;
width:100%;
}
#Logo
{
float:left;
}
#Carousel
{
height:550px;
width:100%;
background-image:url('img_data/carousel_bar_01.png');
background-repeat:repeat-x;
}
#SilverlightContainer
{
height:550px;
width:900px;
margin-left:auto;
margin-right:auto;
}
最佳答案
您不必使用两个 div 来实现您想要的。 只需将您的背景图像放在正文中即可
body{ background:url(image path here) repeat-x}
然后给你的div 一定的宽度，并给它一个风格，如
div#yourID{margin:auto}
这很适合你。
关于html - 100% 宽度，背景重复，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10713467/