您的位置：首页 > Web前端 > CSS

CSS解决 DIV 3列居中难题

2013-05-03 22:44 246 查看

在DIV+CSS中浮动[/b]功能非常的强大，能实现非常复杂的排版问题，2列居中没问题，但是DIV 3列居中经常出现混乱现象。现在为大家提供解决方法。

布局使用的是 左 -右 -中 的方法，在IE和Firefox测试没问题，以前书上推荐使用position 但是结果出现排版问题，下面这是我的测试。用颜色标出了。

<!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=utf-8" />

<title>无标题文档</title>

<style type="text/css">

html{ height:100%;width:100%;}

body{ margin:2px ; padding:0px; height:100%;width:100%;}

#box{ width:1000px; margin:auto; padding:0px;}

#left{

height:300px;

background:#0F6;

width:170px;

float:left;

}

#center

{

background:#C69;

height:300px;

margin-left:172px;

margin-right:101px;

}

#right{

height:300px;

width:100px;

float:right;

background:#CC3;

}

</style>

</head>

<body>

<div id="box">

<div id="left"></div>

<div id="right"></div>

<div id="center"></div>

</div>

</body>

</html>

来源：www.21lxj.com

本文出自 “csr0312” 博客，请务必保留此出处http://csr0312.blog.51cto.com/3988257/1192621

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航