div 设置成float以后,与非浮动div之间有间隙
三个div，第一个左浮动，设置宽度，第二个右浮动，设置宽度，第三个不做特别设定，使其位于左右两个div的中间。但是在IE下（IE9）div间有明显间隙。（搜狗浏览器的高速...
三个div，第一个左浮动，设置宽度，第二个右浮动，设置宽度，第三个不做特别设定，使其位于左右两个div的中间。
但是在IE下（IE9）div间有明显间隙。（搜狗浏览器的高速模式下正常无缝隙）
我也网上找过些解决方法，说是第三个也设成浮动就不会有间隙了。我试着改成左浮动，左边是没间隙了，但右边还有，更离谱的是，这时候在搜狗的高速模式以及火狐下第三个div居然换到下一行了。。。
这到底怎么解决？一般左中右的div布局都是怎么实现的？ 展开
但是在IE下（IE9）div间有明显间隙。（搜狗浏览器的高速模式下正常无缝隙）
我也网上找过些解决方法，说是第三个也设成浮动就不会有间隙了。我试着改成左浮动，左边是没间隙了，但右边还有，更离谱的是，这时候在搜狗的高速模式以及火狐下第三个div居然换到下一行了。。。
这到底怎么解决？一般左中右的div布局都是怎么实现的？ 展开
4个回答
展开全部
首先初学没必要深究几个浏览器兼容问题，你能做到IE6+就可以了
其次，你最后问的问题，左中右布局才是问题关键
首先，三个DIV需要在一个容器中，也就是三个DIV外面还有一个DIV收养这三个家伙。然后外围的DIV需要一个宽度，这里给你假设是800px，那么换言之，里面三个DIV的宽度总和小于等于800px，否则其中的一个会被欺负到下一行。假设左右DIV宽度为300px,那么中间就是等于200px，你可以设固定值，也可以干脆设宽度为100%，这样它会自己计算。
到这里，思路就基本完事儿了，其中需要注意的是，div的边框和margin,padding值如果有的话，也要计算到宽度计算中。
现在分析一下你问题所在，第一个左浮动，第二个右浮动，第三个无设置，这样的做法当初很流行，本来顺序应该左浮动，无设置，右浮动，但这样会造成错位，反过就可以解决。
其实简白点做法，就是第一个和第二个都是左浮动，第三个右浮动，重点是：在第三个DIV中再加入一个clear:right;就完事儿了，这个不加，是不行地～
猜测你出现间隙的原因无非就是宽度值没有设定准确，其次消除div的margin和padding值，设为0，基本就没有问题了
仍有问题，站内消息
其次，你最后问的问题，左中右布局才是问题关键
首先，三个DIV需要在一个容器中，也就是三个DIV外面还有一个DIV收养这三个家伙。然后外围的DIV需要一个宽度，这里给你假设是800px，那么换言之，里面三个DIV的宽度总和小于等于800px，否则其中的一个会被欺负到下一行。假设左右DIV宽度为300px,那么中间就是等于200px，你可以设固定值，也可以干脆设宽度为100%，这样它会自己计算。
到这里，思路就基本完事儿了，其中需要注意的是，div的边框和margin,padding值如果有的话，也要计算到宽度计算中。
现在分析一下你问题所在，第一个左浮动，第二个右浮动，第三个无设置，这样的做法当初很流行，本来顺序应该左浮动，无设置，右浮动，但这样会造成错位，反过就可以解决。
其实简白点做法，就是第一个和第二个都是左浮动，第三个右浮动，重点是：在第三个DIV中再加入一个clear:right;就完事儿了，这个不加，是不行地～
猜测你出现间隙的原因无非就是宽度值没有设定准确，其次消除div的margin和padding值，设为0，基本就没有问题了
仍有问题，站内消息
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
div不要用浮动，我个人很不主张用浮动，因为不可控，天知道他会浮动到哪里去，而且不同浏览器对于浮动到解析也不一样，所以我总是使用绝对宽度和高度，首先在页面设计的时候就规划好每个div的大小，然后用width和height属性设置，至于布局问题，每个div都是从左到右，从上到下布局的，LZ若要安排布局的话，在写div的时候就要有意安排他们的位置，LZ所说放不开的情况是因为本层的宽度已经容纳不下这个元素，这个元素会继续按照是从左到右，从上到下的原则安排到下一行。若LZ一定要用float，那一定要同时使用clear属性来消除浮动，稳妥一些。
还可再CSS中使用background-position属性设置位置，用双关键字如center center就能设置元素从上下方向是居中，从左右方向是居中。
还有一个方法是设置绝对位置，不论前面div怎样安排，我只要设置绝对位置，就可以把div安排在任意地方，但是这个我也不提倡，因为一旦设置绝对位置就不会考虑其他元素，也就是会出现重叠的现象。
还可再CSS中使用background-position属性设置位置，用双关键字如center center就能设置元素从上下方向是居中，从左右方向是居中。
还有一个方法是设置绝对位置，不论前面div怎样安排，我只要设置绝对位置，就可以把div安排在任意地方，但是这个我也不提倡，因为一旦设置绝对位置就不会考虑其他元素，也就是会出现重叠的现象。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style type="text/css">
<!--
.con_1{
float:left;
display:block;
width:300px;
height:300px;
background-color:#990000;
}
.con_2{
float:right;
margin-left:auto;
margin-right:auto;
display:block;
width:300px;
height:300px;
background-color:#33FF00;
}
.con_3{
margin:auto;
display:block;
width:300px;
height:300px;
background-color:#9900FF;
}
-->
</style>
</head>
<body>
<div class="con_1"></div>
<div class="con_2"></div>
<div class="con_3"></div>
</body>
</html>
这个是我刚自己写的，我机子上没有IE9,就测了下IE6 、IE8、火狐、360没有什么问题，希望能帮到你
<!--
.con_1{
float:left;
display:block;
width:300px;
height:300px;
background-color:#990000;
}
.con_2{
float:right;
margin-left:auto;
margin-right:auto;
display:block;
width:300px;
height:300px;
background-color:#33FF00;
}
.con_3{
margin:auto;
display:block;
width:300px;
height:300px;
background-color:#9900FF;
}
-->
</style>
</head>
<body>
<div class="con_1"></div>
<div class="con_2"></div>
<div class="con_3"></div>
</body>
</html>
这个是我刚自己写的，我机子上没有IE9,就测了下IE6 、IE8、火狐、360没有什么问题，希望能帮到你
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用css控制吧
<!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" />
<title>无标题文档</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:62px;
top:11px;
width:300px;
height:761px;
z-index:1;
visibility: visible;
background-color: #FF99FF;
}
#Layer2 {
position:absolute;
left:362px;
top:12px;
width:531px;
height:761px;
z-index:2;
border: solid #FFCCCC;
background-color: #FFFFCC;
}
#Layer3 {
position:absolute;
left:899px;
top:12px;
width:300px;
height:761px;
z-index:3;
border:solid #FFCCCC;
background-color: #FF99FF;
}
-->
</style>
</head>
<body>
<div id="Layer1">left</div>
<div id="Layer2">center</div>
<div id="Layer3">right</div>
</body>
</html>
<!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" />
<title>无标题文档</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:62px;
top:11px;
width:300px;
height:761px;
z-index:1;
visibility: visible;
background-color: #FF99FF;
}
#Layer2 {
position:absolute;
left:362px;
top:12px;
width:531px;
height:761px;
z-index:2;
border: solid #FFCCCC;
background-color: #FFFFCC;
}
#Layer3 {
position:absolute;
left:899px;
top:12px;
width:300px;
height:761px;
z-index:3;
border:solid #FFCCCC;
background-color: #FF99FF;
}
-->
</style>
</head>
<body>
<div id="Layer1">left</div>
<div id="Layer2">center</div>
<div id="Layer3">right</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
