浏览：3812008-03-16 16:06   来自孟磊      :

CSS 布局问题

<body>
<div style="width:750px;float:left;border:1px solid red;">
<div style="width:750px;height:90px;border:1px solid #333;float:left;">div1</div>
<div style="width:500px;height:100px;border:1px solid #333;float:left;">div2</div>
<div style="width:500px;height:200px;border:1px solid #333;float:left;">div3</div>
<div style="width:200px;height:300px;border:1px solid #333;">div4</div>
</div>
</body>

请问如何将DIV4填补到DIV2 DIV3的右侧空间 形成一个整体的方块
现在的问题是 DIV2的右边空出一块区域 我想让DIV4直接填补DIV2 DIV3右侧的空白
楼主
  3个月前   缤纷      :
把div4放div3前面试试.
回复  1楼 回到顶楼 
  3个月前   任力      :
将div2,div3放进一个div中就行了。
回复  2楼 回到顶楼 
  3个月前   杨正祎      :
<div style="width:750px;float:left;border:1px solid red;">
<div style="width:750px;height:90px;border:1px solid #333;float:left;">div1</div>
<div style="width:200px;height:300px;border:1px solid #333;float:right;">div4</div>
<div style="width:500px;height:100px;border:1px solid #333;float:left;">div2</div>
<div style="width:500px;height:200px;border:1px solid #333;float:left;">div3</div>
</div>
回复  3楼 回到顶楼 
  2个月前   一瞬间      :
啊一，问个问题，就是这个边框问题，div4总是会和外面的div边框有一定的距离。如果解决呢。
回复  4楼 回到顶楼 
  2个月前   丁学      :
@一瞬间
因为默认的是HTML的解析方式，你可以加上XHTML 1.0 Transitional的DOCTYPE声明，这样就不会有那个空隙了
不过又带来另一个“问题”，在XHTML里，border的宽度是算到width里的，所以有边框的div1不可以再和父标签具有同样宽度，会超出的，你看下效果就有了
<!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><title>kd</title></head>
<body>
<div style="width:750px;float:left;border:1px solid red;">
<div style="width:750px;height:90px;border:1px solid #333;float:left;">div1</div>
<div style="width:200px;height:300px;border:1px solid #333;float:right;">div4</div>
<div style="width:500px;height:100px;border:1px solid #333;">div2</div>
<div style="width:500px;height:200px;border:1px solid #333;">div3</div>
</div>
</body>
</html>
回复  5楼 回到顶楼 

你还不是小组成员，加入小组以后才能发布新主题！
1 30617