我设计了一个网页，我正在使用CSS进行定位。布局是标题，水平菜单和内容部分（包含2列）。标题，水平菜单和内容部分的宽度都相同。
我可以让他们排在左边，但是我想在页面上“居中”。
我创建了一个名为'full'的DIV来包含所有其他DIV。当我这样做时，我可以使用CSS代码使页眉和菜单居中：margin：0 auto;但是，在页眉和菜单ID中，它不适用于保留在左侧的内容ID。
我可以向左或向右浮动内容部分，它在相应的一侧偏离中心。如果我完全删除了浮动选项，则内容部分的背景颜色与正文背景颜色相同。
当我使用调试器时，Body和#full覆盖了页面的宽度，但似乎只是垂直覆盖页眉和菜单，我不知道为什么。
我的猜测是我需要在某处使用“清除”，但我不知道在哪里。我在#menuBar中尝试了'clear：both'功能，但它没有用。
非常感谢任何帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My 1st Practice Page</title>
<style>
#content {
background-color: #eee;
float: left;
}
body {
background-color: silver;
}
#header {
width: 976px;
height: 154px;
background-image: url('images/header-bg.jpg');
background-repeat: no-repeat;
text-align: center;
margin: 0 auto;
}
#header h1 {
color: white;
text-align: center;
padding: 52px;
margin: 0 auto;
}
#menuBar {
width: 976px;
height: 33px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1.2em;
font-weight: bold;
text-transform: uppercase;
color: white;
background-color: #2F3C4C;
background: 5px solid red;
margin: 0 auto;
}
#menuBar ul {
list-style-type: none;
float: left;
margin: 0 auto;
}
#menuBar li {
float: left;
width: 150px;
padding: 0 10px;
margin: 0 auto;
text-align: center;
}
#menuBar li:hover {
color: blue;
cursor: auto;
}
#columnLeft {
width: 582px;
padding-left: 18px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 0.95em;
line-height: 1.2em;
float: left;
}
#columnLeft img {
float: left;
padding: 5px;
}
#columnRight {
width: 376px;
float: left;
}
#columnRight h2 {
margin: 0 auto;
padding: 10px;
}
#columnRight img {
height: 150px;
width: 150px;
float: left;
padding: 10px;
}
</style>
</head>
<body>
<div id="full">
<div id="header">
<h1> Company Name Inc. </h1>
</div>
<div id="menuBar">
<ul>
<li>home</li>
<li>products</li>
<li>services</li>
<li>about us</li>
<li>contact us</li>
</ul>
</div>
<div id="content">
<div id="columnLeft">
<h2> Category 1 </h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. This is some text talking about our first product. This is just a bunch of random information to fill some space. I bet your are really interested. </p>
<h2> Category 2 </h2>
<img src="images/ss_img007.jpg" width="100" height="100" alt="" border="0">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Here is another paragraph with some more random infomration that I am sure you are not even reading and do not necessarily care about. Lets see how this works. </p>
<h2> Category 3 </h2>
<p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. This is some text talking about our third product. This is just a bunch of random information to fill some space. I bet your are really interested. </p>
<h2> Category 4 </h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Here is another paragraph with some more random infomration that I am sure you are not even reading and do not necessarily care about. Lets see how this works. </p>
</div>
<div id="columnRight">
<h2> Pictures </h2>
<img src="images/ss_img001.jpg" alt="" >
<img src="images/ss_img002.jpg" alt="" >
<img src="images/ss_img003.jpg" alt="" >
<img src="images/ss_img004.jpg" alt="" >
<img src="images/ss_img005.jpg" alt="" >
<img src="images/ss_img006.jpg" alt="" >
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
你给#content float：left;对于那个onli它已经对齐到左边，float：left表示它会改变正常的流程..你只需要检查这个代码。 我的第一个练习页面
#content {
background-color: #eee;
width:976px;
margin:0 auto;
}
body {
background-color: silver;
}
#header {
width: 976px;
height: 154px;
background-image: url('images/header-bg.jpg');
background-repeat: no-repeat;
text-align: center;
margin: 0 auto;
}
#header h1 {
color: white;
text-align: center;
padding: 52px;
margin: 0 auto;
}
#menuBar {
width: 976px;
height: 33px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1.2em;
font-weight: bold;
text-transform: uppercase;
color: white;
background-color: #2F3C4C;
background: 5px solid red;
margin: 0 auto;
}
#menuBar ul {
list-style-type: none;
float: left;
margin: 0 auto;
}
#menuBar li {
float: left;
width: 150px;
padding: 0 10px;
margin: 0 auto;
text-align: center;
}
#menuBar li:hover {
color: blue;
cursor: auto;
}
#columnLeft {
width: 582px;
padding-left: 18px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 0.95em;
line-height: 1.2em;
float: left;
}
#columnLeft img {
float: left;
padding: 5px;
}
#columnRight {
width: 376px;
float: left;
}
#columnRight h2 {
margin: 0 auto;
padding: 10px;
}
#columnRight img {
height: 150px;
width: 150px;
float: left;
padding: 10px;
}
</style>
</head>
<body>
<div id="full">
<div id="header">
<h1> Company Name Inc. </h1>
</div>
<div id="menuBar">
<ul>
<li>home</li>
<li>products</li>
<li>services</li>
<li>about us</li>
<li>contact us</li>
</ul>
</div>
<div id="content">
<div id="columnLeft">
<h2> Category 1 </h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. This is some text talking about our first product. This is just a bunch of random information to fill some space. I bet your are really interested. </p>
<h2> Category 2 </h2>
<img src="images/ss_img007.jpg" width="100" height="100" alt="" border="0">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Here is another paragraph with some more random infomration that I am sure you are not even reading and do not necessarily care about. Lets see how this works. </p>
<h2> Category 3 </h2>
<p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. This is some text talking about our third product. This is just a bunch of random information to fill some space. I bet your are really interested. </p>
<h2> Category 4 </h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Here is another paragraph with some more random infomration that I am sure you are not even reading and do not necessarily care about. Lets see how this works. </p>
</div>
</div>
</div>
</body>
</html>
答案 1 :(得分：1)
#content {
width:976px;
margin: 0 auto;
}
body {
background-color: silver;
}
#header {
width: 976px;
height: 154px;
background-image: url('images/header-bg.jpg');
background-repeat: no-repeat;
text-align: center;
margin: 0 auto;
}
#header h1 {
color: white;
text-align: center;
padding: 52px;
margin: 0 auto;
}
#menuBar {
width: 976px;
height: 33px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1.2em;
font-weight: bold;
text-transform: uppercase;
color: white;
background-color: #2F3C4C;
background: 5px solid red;
margin: 0 auto;
}
#menuBar ul {
list-style-type: none;
float: left;
margin: 0 auto;
}
#menuBar li {
float: left;
width: 150px;
padding: 0 10px;
margin: 0 auto;
text-align: center;
}
#menuBar li:hover {
color: blue;
cursor: auto;
}
#columnLeft {
background-color: #eee;
margin:0 auto;
width:600px;
padding-left: 18px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 0.95em;
line-height: 1.2em;
}
#columnLeft img {
float: left;
padding: 5px;
}
#columnRight {
width: 376px;
float: left;
}
#columnRight h2 {
margin: 0 auto;
padding: 10px;
}
#columnRight img {
height: 150px;
width: 150px;
float: left;
padding: 10px;
}
</style>
将相应的宽度分配给内容div - fiddle
答案 2 :(得分：1)
if you want to apply the background color for left and right columns means you just try like this #columnLeft {background: #dedede; } for left column and for right column also you can try with this #columnRight {background: #c0c0c0; }
Your Code....
#columnLeft {
width: 582px;
padding-left: 18px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 0.95em;
line-height: 1.2em;
float: left;
background: #dedede;
}
#columnRight {
width: 376px;
background: #ccc;
float: left;
}