我一直在撞我的头靠在墙上几个小时试图找出这个问题,认为它必须是小我缺少的东西。我在网上搜索,但没有发现似乎工作。 HTML是:
@H_301_2@<body>
<div id="header">
<div id="bannerleft">
</div>
<div id="bannerright">
<div id="WebLinks">
<span>Web Links:</span>
<ul>
<li><a href="#"><img src="../../Content/images/MySpace_32x32.png" alt="MySpace"/></a></li>
<li><a href="#"><img src="../../Content/images/FaceBook_32x32.png" alt="Facebook"/></a></li>
<li><a href="#"><img src="../../Content/images/Youtube_32x32.png" alt="YouTube"/></a></li>
</ul>
</div>
</div>
</div>
<div id="Sidebar">
<div id="SidebarBottom">
</div>
</div>
<div id="NavigationContainer">
<ul id="Navigation">
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
</ul>
</div>
<div id="Main">
<!-- content -->
</div>
</body>
我的完整CSS是:
@H_301_2@* { margin:0px; padding:0px; } body { font-family:Calibri,Sans-Serif; height:100%; } #header { width:100%; z-index:1; height:340px; background-image:url("../../Content/images/bannercenter.gif"); background-repeat:repeat-x; } #header #bannerleft { float:left; background-image:url("../../Content/images/bannerleft.gif"); background-repeat:no-repeat; height:340px; width:439px; z-index:2; } #bannerright { float:right; background-image:url("../../Content/images/bannerright.gif"); background-repeat:no-repeat; width:382px; height:340px; background-color:White; z-index:2; } #Sidebar { width:180px; background:url("../../Content/images/Sidebar.png") repeat-y; z-index:2; height:100%; position:absolute; } #SidebarBottom { margin-left:33px; height:100%; background: url("../../Content/images/SidebarImage.png") no-repeat bottom; } #NavigationContainer { position:absolute; top:350px; width:100%; background-color:#bbc4c3; height:29px; z-index:1; left: 0px; } #Navigation { margin-left:190px; font-family:Calibri,Sans-Serif; } #Navigation li { float:left; list-style:none; padding-right:3%; padding-top:6px; font-size:100%; } #Navigation a:link,a:active,a:visited { color:#012235; text-decoration:none; font-weight:500; } #Navigation a:hover { color:White; } #WebLinks { float:right; color:#00324b; margin-top:50px; width: 375px; } #WebLinks span { float:left; margin-right:7px; margin-left:21px; font-size:10pt; margin-top:8px; font-family:Helvetica; } #WebLinks ul li { float:left; padding-right:7px; list-style:none; } #WebLinks ul li a { text-decoration:none; font-size:8pt; color:#00324b; font-weight:normal; } #WebLinks ul li a img { border-style:none; } #WebLinks ul li a:hover { color:#bcc5c4; }解决方法
显然你正在寻找
Faux columns技术:-)