以前也知道两列布局是使用浮动,但浮动就带来了很多错乱的格式,今天百度了下,这种方法做的还比较正常。
<div class="service-left"></div>
<div class="service-right"></div>
.service-left {
display: inline;
width: 300px;
float:left;
}
.service-right {
width: 680px;
margin-top: 50px;
margin-left:314px;
}
还有一种方法是网上介绍的:(当然还没有试验,先记录着)
<!DOCTYPE html >
<head>
<style type="text/css">
#sidebar
{width:100px;height:100px;float:left;background-color:#cccccc;border:2px solid #333333;}
#Wrap
{position:absolute;left:113px;right:0px;height:300px;border:2px solid #333333;
background:#ccc url(http://www.baidu.com/img/baidu_logo.gif) no-repeat;}
#floatSpan {float:right;} //for ie6
</style>
</head>
<body>
<div id="sidebar"> left </div>
<div id="Wrap"> right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br /> <span id="floatSpan"><span>
</div>
</body>
</html>