[div+css]如何在适当的位置用clear关闭浮动floatHTML codediv classitemspan数据/spanspan数据
[div+css]如何在适当的位置用clear关闭浮动float
HTML code <div class='item'> <span>数据</span> <span>数据</span> <span>数据</span> <span>数据</span> <span>数据</span> <span>数据</span> <span>数据</span> <span>信数据</span> </div> <div class='item'> ...其他内容 </div>
我想实现的效果:
一个DIV有边框的,里面有多个数据块;没有设置高度的。
多个文字数据显示在同一行,但是不同的数据块宽度不一样。于是我设置了span的效果display:block;width:**px;
问题:
这样造成一个问题,这个DIV里的那么多float没有关闭,在IE下感觉不出差别来。
但是在火狐下,发现DIV的高度只显示出2px;就是只能看到2条边框线,
而里面的span内容位移到DIV第一top边框下面来了,脱离了DIV,没有被DIV套住。
很显然,因为没有关闭float。
我的解决办法:
在float标签最后再加一个标签,设置CSS:clear:both;这样在火狐下就能正常显示了。
HTML code <div> .......主要内容 <span style='clear:both'></span> </div>
我要问的是:
你们是如何解决这个问题的。方法是这样吗?还有其他更好的方法没有?
[解决办法]以前的帖子我是这样说的~
经试验,还可以这样:
<div style=" float:left; background-color:#00ff00;">
<div style="float:left; background-color:#ff0000; height:250px; width:200px;">此处显示新 Div 标签的 </div>
<div style="float:right;background-color:#0000ff; height:450px; width:200px;">此处显示新 Div 标签的内容 </div>
</div>
我来说原理~
应该父容器没有浮动,而子容器浮动了
所以子容器就浮出了父容器 所以在父容器上加上float后
子容器就在父容器内浮动了
另外方法
<div style=" overflow:auto;_height:1%; background-color:#00ff00;">
<div style="float:left; background-color:#ff0000; height:250px; width:200px;">此处显示新 Div 标签的 </div>
<div style="float:right;background-color:#0000ff; height:450px; width:200px;">此处显示新 Div 标签的内容 </div>
</div>
[解决办法]HTML code你代码写的有问题.DIV+CSS并非让你烂用DIV.合理的布局才是硬道理.看你上面代码所描述的.可以使用下面我的方法<ul id="menu"> <li><a>数据</a></li> <li><a>数据</a></li> ..... <li class="item"></li></ul>