div+css如何做页面的一行两列布局

html-css017

div+css如何做页面的一行两列布局,第1张

div+css做页面的一行两列布局，首先我们是需要三个div的，第一个div包裹着其他的2个div，然后给那2个div设置float属性和width，height，最好是给个border利于布局的时候方便观察，这里举个例子：

<html>

<head>

<style>

#div1{

width:960px//通过id来控制

height:600px

}

.left{

width:400px

height:400px

border:1px solid #f00

float:left

marign-right:40px //距离第三个div有点距离

}

.right{

width:400px

border:1px solid #f00

height:400px

float:left

}

</style>

</head>

<body>

<div id='div1'>

<div class='left'>我是左边的</div>

<div class='right'>我是右边的</div>

</div>

</body>

</html>

<div class="main">

<div class="left"

</div>

<div class="right">

</div>

<div class="clear">

</div>

.clear{display:both}

.main{

background:#999

}

.left{

float:left

width:250px

}

.right{

float:right

}