Question

我正在构建我的网站的内容部分，我想做一个测试，以确保我可以使用浮动并排放置东西：左，右等...在我的网站上我能够得到彼此相邻的2个盒子，但是盒子所在的背景容器不会以1000px为中心并填满整个内容背景。一旦你看了我的网站你会明白...我知道问题出在我的CSS中，请帮助。我的网站的其余部分包含了100％的背景，然后我制作了1000px的容器。我不知道为什么它现在不起作用，因为它与顶部横幅和菜单栏一起工作。总是感谢！

站点：

http://www.nestudiosonline.com/test.php

HTML：

<div id="contentbackground">
    <div id="content">
    <div id="flashbanner"></div><div id="test"></div>
    </div>
    </div>

的CSS：

@charset "utf-8";

#contentbackground
{
width:100%;
height:auto;
margin-top:0px;
margin-left:0px;
margin-bottom:0px;
margin-right:0px;
padding-top:0px;
padding-left:0px;
padding-bottom:0px;
padding-right:0px;
border:0
}

#content
{
background-color:#FFF;
/* for IE */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter:alpha(opacity=80);
/* CSS3 standard */
opacity:.8;
width:1000px;
height:auto;
margin-top:0px;
margin-left:auto;
margin-bottom:0px;
margin-right:auto;
padding-top:10px;
padding-left:5px;
padding-bottom:5px;
padding-right:5px;
border:solid;
border-width:1px
}

#flashbanner
{
float:left;
display:inline;
width:500px;
height:200px;
margin:0px;
padding:0px;
border:solid;
border-width:1px
}

#test
{
float:right;
width:400px;
height:200px;
margin:0px;
padding:0px;
border:solid;
border-width:1px
}

Answer 1

我不确定我是否理解正确，但将overflow: hidden放在#content上会让一切变得清凉。

编辑：以及同一元素上的clear: both。

编辑：我在Firebug中应用了这些更改，似乎工作正常。

Answer 2

首先为overflow:hidden;和#linksbackground添加#content。然后你必须明白你已经在你的身体上设置了背景，所以这种行为是合乎逻辑的。要实现您的目标，您需要在body标记下方创建一个包装器div，然后在</body>之前将其关闭。为此div添加标识#wrapper并添加以下属性

#wrapper {
    background: url("../images/olddkeshant3.jpg") no-repeat scroll 0 0 transparent;
    margin: 0 auto;
    width: 1000px;
}

然后从#bodybackground删除背景。

要将背景定位在特定位置，您可以将背景属性中的上述值0 0更改为符合您需要的任何内容。

百分比X对齐点X％横向（水平）或向下（用于垂直）图像的点X％横向（水平）或向下（用于 vertical）元素的填充框。例如，值对为'0％ 0％'，图像的左上角与左上角对齐填充盒。价值对 '100％100％'位于右下角右下角的图像一角填充盒的一角。有了价值对'14％84％'，点数14％横向和84％的图像是位于14％对面和84％在填充盒下面。

来源：http://www.w3.org/TR/CSS2/colors.html#propdef-background-position

父母和孩子的css问题，内容背景不会正确布局

2 个答案: