0

我正在制作一个 CSS 网站，我希望看起来像这样：3 个垂直 div。左中右。中心div是网站内容，我希望左右div填充中心和浏览器边框之间的空间。

这是我的代码。

    #container
{
 width:100%;
 background-color:#000;
}
.center
{
 width:1000px;
 height:400px;
 background-color:#F90;
 margin: 0px auto;
 overflow: auto;
}
.spacer-left
{ 
 width:100%;
 height:400px;
 background-color:#F90;
 float:left;
}
.spacer-right
{ width:100%;
 height:400px;
 background-color:#F90;
}

这是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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div class="spacer-left"></div>
<div class="center" style="background-color:#F30;"></div>
<div class="spacer-right"></div>
<div style="clear:both"></div>
</div>
</body>
</html>

我尝试了 2 个 div，没有问题。左边有浮动：左边和宽度以像素为单位，右边有 100% 宽度，没有浮动。有效。但是如何用 3 个 div 来制作它。提前致谢！

4

2 回答 2

1

感谢塞巴斯蒂安的帮助，但我想出了其他方法。这就是代码现在的样子并且它可以工作。

#container
{
    width:1000px;
    background-color:#000;
    margin:0 auto;
}
.center
{
    width:100%;
    height:400px;
    background-color:#F90;
    margin: 0px auto;
    overflow: auto;
}
.spacer
{   
    width:50%;
    height:400px;
    background-color:#F90;
    float:left;
}
.head_warp
{
    width:100%;
    display:block;
    height:400px;
    margin:0 auto;
    padding:0;
    position:absolute;
    top: 0;
    left: 0;
    text-align:center;
    z-index:-9999;
}

和 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="head_warp">
<div class="spacer"></div>
<div class="spacer" style="background-color:#F06"></div>
</div>
<div id="container">
<div class="center" style="background-color:#F30;"></div>
</div>
</body>
</html>

再次感谢您的帮助。如果我的解决方案有问题，我会在这里再次写信。

于 2010-11-19T14:46:17.940 回答
0

更新：以下答案的另一种选择，使用三个 div 和 z-index。

http://jsfiddle.net/SebastianPataneMasuelli/mzvB4/1/

如果您尝试使用中心 div 中的内容创建站点，则可以使用简单的复制该布局：

<body>
  <div class="center">center</div>
</body>

与CSS：

html {height: 100%;   }
.center { width:750px; margin: 30px auto; height: 100%; }

在这里玩：http: //jsfiddle.net/SebastianPataneMasuelli/mzvB4/

从类名中.spacer_left，.spacer_right我假设这些 div 是空的分隔符并且没有必要。

这是基本 css 布局的好资源：http ://www.csseasy.com/

于 2010-11-19T11:18:00.177 回答