手机
当前位置:查字典教程网 >网页设计 > 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浮动来设置】相关文章:

IE6定义1px左右高度的容器示例代码

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

如何处理div+css布局左右浮动问题

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

div怎么分左右两半?

CSS网页布局中默认字体样式

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

对div盒子模型使用心得总结

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

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

精品推荐
分类导航