答案 0 :(得分：0)
我对您的代码进行了更改...
* {
padding: 0;
margin: 0;
}
body {
background-color: #ccc;
background-repeat:repeat;
font: Tahoma, Geneva, sans-serif;
color: #FFF;
}
.wrapper {
width: 95%;
margin: 0 auto;
}
/* ------------------------ Start Header -----------------*/
.header {
background-color: #333;
}
* html .header {height:110px} /* IE Min-Height Hack */
/* ------------------------ End Header -----------------*/
/* ------------------------ Start Nav Bar -----------------*/
.nav-bar {
background-color: #E8E8E8;
margin: 0px 0px 13px 0px;
min-height: 17px;
padding: 13px;
border: 1px solid #AEAEAE;
}
* html .nav-bar {height: 17px} /* IE Min-Height Hack */
.nav-links li {
list-style: none;
display: inline;
margin-right: 16px;
font: normal small-caps normal 12px/1.4 Tahoma, Geneva, sans-serif;
}
.nav-links li a:link {
background-color: #E8E8E8;
color: #333;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
.nav-links li a:visited {
background-color: #E8E8E8;
color: #333;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
.nav-links li a:hover {
background-color: #E8E8E8;
color: #999;
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
/* ------------------------ End Nav Bar -----------------*/
/* ------------------------ Start outer content -----------------*/
#container {
overflow: hidden;
width: 100%;
clear:both;
}
#outercontent {
background-color: orange;
padding: 10px;
min-height: 655px;
margin-bottom: 13px;
border: 1px solid #AEAEAE;
clear:both;
box-sizing: border-box;
}
/* ------------------------ End outer content -----------------*/
/* ------------------------ Start Columns -----------------*/
#centercolumn { /* Parent Wrapper for inside boxes background-color: #333333; */
background-color: red;
margin: 0;
padding: 20px;
width: 80%;
min-height: 630px;
float: left;
box-sizing: border-box;
}
I
.rightcolumn {
padding: 10px;
padding-top: 0px;
width: 20%;
float: left;
font: normal normal 10px/1.4 Tahoma, Geneva, sans-serif;
color: #666666;
margin: 0px 0px 0px 0px;
box-sizing: border-box;
}
.rightcolumn-block {
padding: 7px;
min-height: 160px;
border: 1px solid #AEAEAE;
background-color: #ccc;
font: normal normal 10px/1.4 Tahoma, Geneva, sans-serif;
color: #666666;
}
.p {
font: normal small-caps normal 40px/1.2 Tahoma, Geneva, sans-serif;
}
table.db-table-products { border-right:1px solid #ccc; border-bottom:1px solid #ccc; background-color:#FFF; overflow:hidden;}
table.db-table-products th { padding:5px; border-left:1px solid #ccc; border-top:1px solid #ccc; font: normal small-caps normal 12px/1.2 Tahoma, Geneva, sans-serif, bold; background-color: #FFF; color: #000;}
table.db-table-products td { padding:4px; border-left:1px solid #ccc; font: normal small-caps normal 10px/1.2 Tahoma, Geneva, sans-serif; border- top:1px solid #ccc; background-color:#999;}
table.db-table-products caption {
font: normal small-caps normal 16px/1.4 Tahoma, Geneva, sans-serif;
display: table-caption;
}
table.db-table-products hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
/* unvisited link */
table.db-table-products a:link {
color: #FFDD38;
}
/* visited link */
table.db-table-products a:visited {
color: #D8C150;
}
/* mouse over link */
table.db-table-products a:hover {
color: #D8B70F;
}
/* selected link */
table.db-table-products a:active {
color: #D8B70F;
}
/* ------------------------ End Columns -----------------*/
/* ------------------------ Start Footer -----------------*/
#footer {
border: 1px solid #AEAEAE;
padding: 15px;
margin-bottom: 13px;
background-color: #e8e8e8;
font: normal normal 10px/1.4 Tahoma, Geneva, sans-serif;
color: #666666;
background-color: blue;
/* padding-bottom: 100em; */
/* margin-bottom: -200em; */
}
/* ------------------------ End Footer -----------------*/
h1 {
font-size: 23px;
font-family: Arial;
font-weight:bold;
font: normal small-caps normal 23px/1.4 Tahoma, Geneva, sans-serif;
}
h2 {
font-size: 23px;
font-family: Arial;
font-weight:bold;
font: normal small-caps normal 23px/1.4 Tahoma, Geneva, sans-serif;
}
.float {
float: left;
padding: 0px 10px 0px 0px;
}
img {
border: none;
}
/* Links */
a:link {
color: #fff;
text-decoration: underline;
}
a:visited {
color: #fff;
text-decoration: none;
}
a:hover {
color: #333333;
background-color: #fff;
text-decoration: none;
}
<!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=UTF-8" />
<!-- <link href="table-css/table-db.css" rel="stylesheet" type="text/css"> -->
<link rel="stylesheet" type="text/css" href="main4.css" />
<title>Products Market</title>
</head>
<body>
<div id="container">
<!-- Start Wrapper -->
<div class="wrapper">
<!-- Start Header -->
<div class="header"> <img src="images/logo.jpg" alt="Logo" width="1200" height="150" />
</div>
<!-- End Header -->
<!-- Start Navigation Bar -->
<div class="nav-bar">
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">24h Monetary Market</a></li>
<li><a href="#">Actual Monetary Market</a></li>
<li><a href="#">Products Market</a></li>
<li><a href="#">Jobs Market</a></li>
<li><a href="#">Contact me</a></li>
</ul>
</div>
<!-- End Navigation Bar -->
<!-- Start Outer Content -->
<div id="outercontent">
<div id="centercolumn">
<h1><b><u>Welcome</u></b></h1>
<p>
<?php include 'test.php'; ?>
</p><br />
</div>
<!-- Start Right Content -->
<div class="rightcolumn">
<div class="rightcolumn-block">
<h2><u><b>About Me</b></u></h2>
TEXT
</div>
<div class="rightcolumn-block">
<h2><u><b>Search</b></u></h2>
TEXT
</div>
</div> <!-- End Right Content -->
</div>
<!-- End Outer Content -->
<!-- End Outer Content -->
<!-- Start Footer -->
<div id="footer"> © Copyright with <a href="http://www.code-sucks.com/">Code-Sucks.com</a> 2006-2015 </div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</div>
</div>
</body>
</html>
1]我只是为h1复制了相同的css，并为h2制作了css。这样做的原因是您的页面上应该只有1个h1标记，它应该是页面的标题。我使用了相同的CSS，但您可以根据需要进行更改。
2]你的代码编写方式有两列。我重写了rightcolumn作为一个包装并添加了一个.rightcolum-block来保存你想要的.rightcolumn内的每个块。这允许您使用与侧栏中的内容分开的列。
3]查看#outercontent的CSS，您会看到clear:both;这会强制#outercontent延伸其中包含的内容。此外，您会看到box-sizing: border-box;这也已添加到centercolumn和rightcolumn。这会强制填充，边框和边距包含在元素的设置宽度中，而不是添加要添加到元素中的每个元素的设置。
4]我从#outercontent移除宽度。没有必要进行此设置。
5]您在centercolumn上设置了宽度百分比，在rightcolumn上设置了像素宽度设置。它需要是一个或另一个。对于您的应用程序，百分比更好，因此我将rightcolumn的宽度更改为20％。
我希望这有帮助...花时间比较您的代码和我的代码以查看更改。如果你不明白某些类型的css和属性进入谷歌。 http://www.w3schools.com/通常是第一个，提供易于理解的属性/属性描述。