手机
当前位置:查字典教程网 >网页设计 > 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让TD自动换行

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

firefox不显示border通过清除float便可解决

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

瀑布流布局的两种实现方式:传统多列浮动和绝对定位布局

DIV+CSS垂直居中一个浮动元素

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

17个有趣实用的CSS 3悬停效果教程

响应式布局该怎么设计

div在firefox ie 水平居中对齐

精品推荐
分类导航