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>

你设置的总宽度是470

side

宽度是120

文字是从左向右

main行

宽度350

margin-left的意思是

从盒子左侧空出120px

再从左向右排列

把margin-left和参数值去掉

两行width参数相同即可

如果width参数不相同会导致脑袋大身子小

或者都加上margin-left

参数相同

也可显示居中