转自:http://zzc1684.iteye.com/blog/1520217
(用div控制元素排版有时候还是弄不明白,不过用表格的方式还是比较方便解决的,div排版留着有时间在研究,下面的方式也能解决问题的,可参考下)
一般我们在做网页的时候如果放两个DIV,那在显示的时候这两个DIV是在列的方面上显示的,也就是第二个DIV显示在第一个的下面,如果我们想要让这两个DIV在行的方向上显示,可以用下面的css来实现
<html>
<head>
<style type="text/css">
.left1{
float:left; /**//* 这个是关键的地方 让col1往左浮动,这样它的后面(右边)就可以放置别的元素(别的元素:可以是div,图片,文字等) */
width:300px;height:300px;
background:#eee;
border:1px solid #ccc;
}
.left2
{
float:left;/**//* 这个是关键的地方 让col2也往左浮动,紧跟在col1的后面 */
margin-left:5px;/**//* 让col2和col1之间有些间隔 */
width:490px;height:300px;/**//* 给一个尺寸 可以随意*/
background:#ddd;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div class="left1">
You did a good job!
</div>
<div class="left2" >
You did a good job!
</div>
</body>
</html>