给DIV一个样式是:“position: absolute;”,那它下面的DIV就会跑到上面...
发布网友
发布时间：2022-04-23 07:54
共7个回答
热心网友
时间：2022-04-20 19:49
<div id="top" style="width:302px;border:solid 1px #ff3000;">
<div id="left" style="float:left;width:100px;text-align:center;background-color:blue;">
文档<br />
文档<br />
文档<br />
文档<br />
文档
</div>
<div id="right" style="float:right; width:200px; text-align:center;background-color:yellow;">
文档<br />
文档<br />
文档<br />
文档<br />
文档<br />
标题<br />
标题
</div>
<div style="clear:both;"></div>
</div>
<div id="bottom" style="clear:both;">标题</div>
不知道你top的外层是什么结构，仅仅是你描述的效果，上面的代码就可以。position:absolute你最好还是看一下他的具体作用，你这样“无意中”的使用的话会产生很多意想不到的新问题最后可能会让你的排错更加困难。还有你说高度不固定是啥意思？你的页面不可能无止境的往下延伸吧，你可以定个高度然后在div的style里加个overflow-y:auto
这个问题的本质就是要搞清楚float到底做了什么，当你定义了float，这个元素就脱离了正常的流布局，对于外层的正常流中的元素来说这个元素就好像不存在一样(位置上的),所以top里面2个元素都定义成float后你的top就相当于一个空元素
http://www.w3school.com.cn/css/css_positioning_floating.asp这里有最完美的解答，看行框与浮动
热心网友
时间：2022-04-20 21:23
样式 position: absolute; 为绝对位置，与边框无关，计算宽度时要考虑border,padding,margin等因素。你这里top的有1px的边框，所以宽度300px就不够了，将宽度改为302px就可以了。
所以，top行应改为：
<div id="top" style="width:302px; border:solid 1px #eee;">
热心网友
时间：2022-04-20 23:15
在绝对定位的DIV外面在加一个DIV来清除浮动，也就是<div style="clear:both;"></div>
热心网友
时间：2022-04-21 01:23
<div id="top" style="width:300px; border:solid 1px #eee; position: absolute;">
<div id="left" style="float:left; width:100px; text-align:center;">
文档<br />
文档<br />
文档<br />
文档<br />
文档
</div>
<div id="right" style="float:right; width:200px; text-align:center;">
文档<br />
文档<br />
文档<br />
文档<br />
文档<br />
标题<br />
标题
</div>
<div id="bottom" style="clear:both;">标题</div>
</div>
你放错位置了，不知道是不是要放里面的，边框也要算在大小里面的哦
热心网友
时间：2022-04-21 03:47
<div id="top" style="border:solid 1px #eee; width:300px; ">
<div id="right" style="float:right; width:200px; text-align:center; ">
文档<br />
文档<br />
文档<br />
文档<br />
文档<br />
标题<br />
标题
</div>
<div id="left" style=" width:100px; text-align:center;">
文档<br />
文档<br />
文档<br />
文档<br />
文档
</div>
</div>
<div id="bottom" style="clear:both;">标题</div>
热心网友
时间：2022-04-21 06:29
写的好乱 试试这个z-index :1;
热心网友
时间：2022-04-21 09:27
框不住，是因为id为top的div，高度没有自动撑开。（凡是用了float属性的标签，它的父元素高度都不会自动撑开。）
解决办法：
一、清除浮动。 你那个clear:both位置没放对地方：要往上移一行，要写在id=top的div内、紧跟在用了float属性的标签后面。
二、给父元素增加自动撑开的样式：给id=top 增加样式overflow：hidden或overflow：auto都可以让它自动撑开高度。
三、写死父元素高度，用css给id=top的div 固定高度。
另外，只是添加样式的话，要用class="top"这种，不用随便用id命名。id一般是给js用的
