手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >div三栏布局左中右通过float浮动来设置
div三栏布局左中右通过float浮动来设置
摘要:下面代码构造div分为3烂,左中右,主要通过float浮动来设置,side靠左浮动,side1靠右浮动,main自动适应调整自身宽度。bod...

下面代码构造div分为3烂,左中右,主要通过float浮动来设置,side靠左浮动,side1靠右浮动,main自动适应调整自身宽度。

<!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/html; charset=gb2312" />

<style type="text/css">

body{margin:0px;} //整个网页左右无空白

#side { background: #99FF99; height: 300px; width: 120px; float: left; }

#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }

#main { background: #99FFFF; height: 300px; margin:0 120px; }

</style>

</head>

<body>

<div id=side>ddddddd</div>

<div id=side1>ffffff</div>

<div id=main>vvvvvvvvvvv</div>

</body>

</html>

【div三栏布局左中右通过float浮动来设置】相关文章:

css布局中的居中问题

div中内容上下居中小结教程

div中内容上下居中小结

使用CSS布局定位属性轻松实现优美站点布局

css控制div不能居中的解决办法

通过CSS让TD自动换行

overflow解决float浮动后高度自适应问题

css控制div中元素居中的示例

Div+CSS布局入门

DIV+CSS创建三栏网页布局方法介绍

精品推荐
分类导航