我有一个我正在开发的网站，我应该先完善布局。但是我现在面临着没有一路到底的问题。我已阅读有关如何在 CSS 中获得 3 列布局的教程 http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks 但 我需要的是可以轻松修复我现有网站的东西......我已经创建了大约 10 个页面，我正在考虑回到表格布局(然后像我在这里所做的那样改造整个事情--> http://www.centuryautosd.com/new.asp 除非 有人有更简单、更好的方法。
这是现有网站的 CSS 和列问题 --> http://www.centuryautosd.com/
我肯定需要一些帮助!
最佳答案
我很确定这个策略对你有用:http://www.ejeliot.com/blog/61
编辑:好的，我们开始吧。
看过去的Dreamweaver模板和拆分内联CSS，我做了如下调整:
1> 在 HTML 的 sidebar1 和 sidebar2 之间移动 mainContent。
2> 将 sidebar1 的 css 更改为:
.thrColFixHdr #sidebar1 {
float: left;
width: 150px;
background: #CCCCCC;
padding: 15px 10px 0px 20px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
背景已更改，以突出页面上的效果。
3> 将 sidebar2 的 css 更改为:
.thrColFixHdr #sidebar2 {
float: left;
width: 160px;
background: #EEEEEE;
padding: 15px 10px 0px 20px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
4> 将 mainContent 的 css 更改为:
.thrColFixHdr #mainContent {
float: left;
width: 390px;
background: #DDDDDD;
padding: 0 10px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
5> 添加contentContainer的定义:
.thrColFixHdr #contentContainer {
overflow: hidden;
}
6> 将 .footer 更改为 #footer 并将 margin-top: 8px 更改为 padding-top: 8px 并添加 text-align:center 并拆分页脚文本。
整个代码在此处通过 Notepad++ HTML Tidy 运行(一些标签格式在放入 Stack Overflow 时略有丢失):
<?xml version="1.0" encoding="iso-8859-1"?>
<!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 name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
<meta http-equiv="Content-Type" content=
"text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/*<![CDATA[*/
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.thrColFixHdr #container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.thrColFixHdr #header {
background: #DDDDDD;
padding: 0 10px 0 20px;
}
.thrColFixHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.thrColFixHdr #contentContainer {
overflow: hidden;
}
.thrColFixHdr #sidebar1 {
float: left;
width: 150px;
background: #CCCCCC;
padding: 15px 10px 0px 20px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
.thrColFixHdr #sidebar2 {
float: left;
width: 160px;
background: #EEEEEE;
padding: 15px 10px 0px 20px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
.thrColFixHdr #mainContent {
float: left;
background: #DDDDDD;
width: 390px;
padding: 0 10px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
.thrColFixHdr #footer {
padding: 0 10px 0 20px;
background:#BBBBBB;
}
.thrColFixHdr #footer p {
margin: 0;
padding: 10px 0;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
/*]]>*/
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css">
/*<![CDATA[*/
.side a {
color: #FFF;
text-decoration: none;
}
a.side:link {color:#FF3;
text-decoration: none;
} /* unvisited link */
a.side:visited {color:#FFF
text-decoration: none;
} /* visited link */
a.side:hover {color:#C00}
a.side:active {color:#C00}
/*]]>*/
</style>
<style type="text/css">
/*<![CDATA[*/
#footer {
font: 12px Arial, Helvetica, sans-serif;
color: #FF3;
text-decoration: none;
padding-top: 8px;
text-align: center;
}
a.footer:link {color:#FF3}
a.footer:visited {color:#FFF}
a.footer:hover {color:#C00}
a.footer:active {color:#C00}
/*]]>*/
</style>
</head>
<body class="thrColFixHdr">
<div id="container">
<div id="header">
<h1>Header</h1><!-- end #header -->
</div>
<div id="contentContainer">
<div id="sidebar1">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the
length of the content. If you'd like a dividing line
instead, place a border on the left side of the #mainContent
div if it will always contain more content.</p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu,
pellentesque eget, cursus et, fermentum ut, sapien.</p>
<!-- end #sidebar1 -->
</div>
<div id="mainContent">
<h1>Main Content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent aliquam, justo convallis luctus rutrum, erat nulla
fermentum diam, at nonummy quam ante ac quam. Maecenas urna
purus, fermentum id, molestie in, commodo porttitor, felis. Nam
blandit quam ut lacus. Quisque ornare risus quis ligula.
Phasellus tristique purus a augue condimentum adipiscing.
Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique
in, vulputate at, odio. Donec et ipsum et sapien vehicula
nonummy. Suspendisse potenti.</p>
<h2>H2 level heading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent aliquam, justo convallis luctus rutrum, erat nulla
fermentum diam, at nonummy quam ante ac quam. Maecenas urna
purus, fermentum id, molestie in, commodo porttitor, felis. Nam
blandit quam ut lacus. Quisque ornare risus quis ligula.
Phasellus tristique purus a augue condimentum adipiscing.
Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique
in, vulputate at, odio.</p><!-- end #mainContent -->
</div>
<div id="sidebar2">
<!-- #BeginLibraryItem "/Library/sidebar2.lbi" -->
<div align="center" class="side">
<img src="images/seHable.jpg" width="162" height="48" alt=
"Se Habla Espanol" border="0" /><br />
<br />
<a href="https://secure.carfax.com/creditCard.cfx" target=
"_blank"><img src="images/carfax.jpg" width="145" height="35"
alt="CARFAX" border="0" /></a><br />
<a href="https://secure.carfax.com/creditCard.cfx" target=
"_blank">FREE CAR FAX</a><br />
<br />
<a href=
"http://www.autorepair.ca.gov/pubwebquery/Vehicle/PubTstQry.aspx"
target="_blank"><img src="images/caGOV.jpg" width="109"
height="78" alt="CA.gov" longdesc=
"http://www.autorepair.ca.gov/pubwebquery/Vehicle/PubTstQry.aspx"
border="0" /><br />
Verify a Smog Check</a><br />
<br />
<a href="http://www.iihs.org/ratings/default.aspx" target=
"_blank"><img src="images/topSafetyPick.jpg" width="111"
height="131" alt="Top Safety Picks" longdesc=
"http://www.iihs.org/ratings/default.aspx" border=
"0" /><br />
Top Safety Picks</a><br />
<br />
<a href="http://www.kbb.com/" target="_blank"><img src=
"images/kbb.jpg" width="155" height="56" alt=
"Kelly Blue Book" longdesc="http://www.kbb.com/" border=
"0" /><br />
Kelly Blue Book</a>
</div><!-- #EndLibraryItem -->
<h3>Sidebar2 Content</h3>
<p>The background color on this div will only show for the
length of the content. If you'd like a dividing line
instead, place a border on the right side of the #mainContent
div if it will always contain more content.</p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu,
pellentesque eget, cursus et, fermentum ut, sapien.</p>
<!-- end #sidebar2 -->
</div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
</div>
<div id="footer">
<!-- #BeginLibraryItem "/Library/footer.lbi" -->
<span class="footer">CENTURY AUTO GROUP, INC. |
619.281.2300<br />
COPYRIGHT 2009-2011 ALL RIGHTS RESERVED | EMAIL: <a href=
"mailto:staff@centuryautosd.com" class=
"footer">STAFF@CENTURYAUTOSD.COM</a></span>
<!-- #EndLibraryItem --><!-- end #footer -->
</div><!-- end #container -->
</div>
</body>
</html>
关于CSS - 需要列在 3 列布局中一直流到底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1919086/