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

html-css09

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框架,分别设置这两个div框架的宽度(宽度应小于或是等于整体宽度),把它们都设置成float:left。基本就是这样了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>一行两列</title>

<style type="text/css">

*{

margin:0padding:0border:0font-size:12pxcolor:#000

}

body{

text-align:centerfont-family:宋体, sans-serif

}

#main{

width:950pxtext-align:leftmargin:0 auto

}

#left{

float:leftwidth:240pxbackground:#9fcmargin-right:10px

}

#right{

float:leftwidth:700pxbackground:#f69

}

</style>

</head>

<body>

<div id="main">

<div id="left">左边部分</div><!--left end-->

<div id="right">右边部分</div><!--right end-->

</div><!--main end-->

</body>

</html>

代码你可以看一下,能实现一行两列