您的位置：首页 > 其它

div在同一行中显示

2007-11-22 15:50 225 查看

一般我们在做网页的时候如果放两个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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航