CSS论坛 - Powered by Discuz! Board

标题: 那位高手帮我看看，到底哪里出了问题。搞几天都搞不好 [打印本页]

作者: wtdxhzx 时间: 2012-4-19 09:45 标题: 那位高手帮我看看，到底哪里出了问题。搞几天都搞不好

就是左中右三块不在一横上。最右边的那块总是浮不上来。。。不知道怎么回事。。。

#focus{ clear:both; overflow:hidden; zoom:1;}

#focus_left{ width:302px; float:left; }

#play{ height:328px; overflow:hidden; background:#fff; border:#D9DFEA solid

1px; margin-bottom:10px; }
#play ul{ position:absolute; z-index:100; margin:270px 0 0 10px;}
#play ul li{ background:url(pic/s.gif) -270px -140px no-

repeat; color:#fff; font-weight:bold; font-size:12px; font-family:Verdana; width:20px;

height:20px; line-height:20px; float:left; margin:5px; text-align:center;}
#play ul li.active{ background-position:-300px -140px; }

#play a{ text-decoration:none;}
#play img{ width:300px; display:block;}
#play span{ position:absolute; display:block; width:290px;

padding:5px; font-size:12px; font-weight:bold; background:#000; color:#ccc; filter:alpha

(opacity=60);opacity:.6; z-index:100; margin-top:-28px;}

/* 排行榜 */
#top{ border:#D9DFEA solid 1px; background:#fff; display:block; zoom:1;

overflow:hidden;}
#top ol{ background:#F2F4F9 url(pic/t.png) center center no-repeat;

height:34px; overflow:hidden;}
#top ol li{ width:100px; float:left; text-align:center;

line-height:33px; border-bottom:#D9DFEA solid 1px; font-size:15px; color:#666; font-

weight:bold;}
#top ol li.active{ background:#fff; border-bottom:#fff solid

1px;}
#top ol li#id_center.active{ background:#fff url(pic/t.png)

center center no-repeat;}

#top ul{ margin:10px; clear:both; background:url(pic/s.gif) -368px

-142px no-repeat; }
#top ul li{ line-height:25px; height:25px; overflow:hidden;}
#top ul li span{ width:15px; height:15px; line-height:20px;

overflow:hidden; display:block; float:left; font-size:10px; -webkit-text-size-adjust:none;
text-align:center; font-family:Verdana; font-weight:bold; color:#fff;}
#top ul li a{ margin-left:10px; font-size:13px;}

#focus_center{ width:407px; margin-left:8px; background:url(pic/p.jpg) 0 0 no-

repeat; border:#D9DFEA solid 1px; padding:9px 10px 0 10px; float:left;}

#focus_center dl{ overflow:hidden;}

#focus_center dl dt{ overflow:hidden; zoom:1;}
#focus_center dl dt span{ float:right;}

#focus_center dl dd{ overflow:hidden; padding:14px 0;}

#focus_center h3{ color:#666666; margin:0; padding:0; line-

height:20px; font-size:15px; text-align:center; }
#focus_center h3 a{ color:#F25D08;}

#focus_center p{ color:#666666; font-size:12px; line-height:20px;

margin:12px 5px; }
#focus_center p a{ color:#8295B9;}

#focus_center ul{ background:#fff;}
#focus_center ul li{ line-height:25px; font-size:14px;}
#focus_center ul li span{ float:right; font-

size:12px;}
#focus_center ul li span a{ color:#999;}
#focus_center ul li a{ color:#333;}
#focus_center ul li a.cl_topic{ color:#F25D08;}

#focus_right{ width:221px; float:left;}

#focus_right p{ background:url(pic/s.gif) 0 -300px no-repeat; height:88px;

margin:0; padding:0;}
#focus_right p a{ width:95px; height:30px; margin:7px;

display:inline-block; float:left; color:#fff; text-align:center; font-size:0;}
#focus_right p a em{ display:none;}
#focus_right p a.cl_phone{ width:100%; height:42px; margin:0;

color:#FD920C; }

#focus_right dl{ border:#D9DFEA solid 1px; border-left:none;

background:#F2F4F9; padding:5px;}
#focus_right dl dt{ padding:2px 0; overflow:hidden;}
#focus_right dl dd{ zoom:1; clear:both; }
#focus_right dl dt span{}
#focus_right dl dt strong{ color:#F2F4F9;}

#focus_right dd ul{ padding:0; margin:0;}
#focus_right dd ul li{ height:50px!important; height:51px;

line-height:16px; margin:10px 5px; clear:both; font-size:12px; color:#999; overflow:hidden;}
#focus_right dd ul li a{ color:#000;}
#focus_right dd ul li img{ border:#B7B6B8 solid 1px;

float:left; margin-right:10px;}

#focus_right dd .cl_split{ height:7px; margin-bottom:10px;

background:url(pic/p.jpg) -30px -390px no-repeat; overflow:hidden; clear:both;}

#focus_right dd ol{ padding:0; }
#focus_right dd ol li{ margin:10px 0; line-height:0; font-

size:0; text-align:center; overflow:hidden;}
#focus_right dd ol li a{ color:#333;}
#focus_right dd ol li img{ border:#B7B6B8 solid

1px;}

作者: lft59598 时间: 2012-4-19 11:41

无图无真相，你还是从最开始布局写代码，然后再往里放东西。
<div id="div">
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="clear"></div>
</div>
你这样看，现在有三个块被包含在一个块里面，而最后一个是为了清楚浮动，不影响其它布局而写的，试试如果没起用的话，也可以删除。
下面是CSS代码：
.clear{clear:both;}
#div{width:1000px;}
.one{
flaot:left;
width:300px;
height:300px;
background:#000;
margin-right:30px;
}

现在可以保证三个块会浮动在一个横上了，至于宽高边界背景等一些数值就可以在放入内容之后再做调整。

作者: 霸气与卑微 时间: 2012-4-25 10:39

你试着在中间的那个div下加一个css样式：overflow:hidden;

作者: zzaoyou 时间: 2012-4-26 16:36

代码好多看不懂啊

欢迎光临 CSS论坛 (http://www.divcss5.com/bbs/)