[已解决问题] CSS 布局问题
提问时间: 2008-03-16 15:53
浏览:421 次
<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右侧的空白
所有回答(8)
|
我的方案你看行不行？外加一个div，可以实现你要的效果
<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="float:left;"> <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> <div style="width:200px;height:300px;border:1px solid #333;">div4</div> </div> </body> <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;float:left;">div2</div> <div style="width:500px;height:200px;border:1px solid #333;float:left;">div3</div> </div> </body> 你是不是想要这样的？ 应该是任力的正确吧？ <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:245px;height:300px;border:1px solid #333; position:absolute; top:108px;">div4</div> </div> 按照你的要求做的.看看合适不? 主要体现在"position:absolute; top:108px;" 使用绝对定位.不修改上面任何一个除div4的div. 在这里你也可以把"top:108px"改成"margin-top:-102px;" 丁学 的回答的应该正确吧，把div4 提到div2和div3上面，让div4 float:right 这样的行了，div布局时很多都这样设计的. 高超,我所理解认为高超是对的. < 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 > <b>< div style="float:left" ></b> < 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 > <b>< / div ></b> < div style="width:200px;height:300px;border:1px solid #333;">div4< / div > < / div > < / body > ======================================== 在你的代码上增长了 < div style="float:left" > div2 div3 < / div > 你好.这个问题很好解决. 1.去掉除了DIV1,2,3的float:left 2.将DIV4放在1的后面.float:right <div style="width:750px;float:left;border:1px solid red;"> <div style="width:750px;height:90px;border:1px solid #333;"> 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> |
