discuz教程 怎么让div里的div置顶，有白边，用了margin:0;没什么效果。
点击联系发帖人
时间：2012-02-27 00:53
2258人阅读
&!DOCTYPE html&
.clearfix {
height: 0;
padding: 0;
font-size: 0;
line-height: 0;
&div class=&main& style=&width:500border:1margin:0&&
&div style=&float:border:1&&
dasdsadsad
&div style=&float:border:1&&
&div class=&clearfix&&&/div&
关键 就是 在 增加浮动层，使用伪类 及 伪元素（:after） 都可。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：4959024次
积分：46488
积分：46488
排名：第55名
原创：227篇
转载：2365篇
评论：519条
(9)(7)(74)(67)(96)(177)(114)(86)(40)(43)(73)(15)(10)(17)(12)(6)(20)(27)(54)(71)(97)(74)(32)(2)(24)(21)(62)(60)(36)(23)(27)(46)(34)(76)(63)(121)(142)(74)(54)(120)(77)(42)(4)(12)(19)(1)(9)(15)(19)(18)(16)(31)(79)(68)&div id=&sub-header&&
&div class=&layout&&
&a id=&sub-logo& href=&{$_G[siteurl]}&&&img src=&/style/images/small_logo.jpg& title=&$_G['setting']['bbname']& alt=&$_G['setting']['bbname']& /&&/a&
&div id=&sub-menu&&
&dl class=&menu-nav&&
&dt&&a href=&{$_G[siteurl]}& onMouseOver=&showMenu({'ctrlid':'twt','duration':'2'});&&123&/a&&/dt&
&dd id=&twt_menu& class=&nav-floor& style=&display:&&
&!--{eval $i = 1;}--&
&!--{loop $catlist $cat}--&
&!--{eval $forumurl = !empty($forum['domain']) && !empty($_G['setting']['domain']['root']['forum']) ? 'http://'.$forum
['domain'].'.'.$_G['setting']['domain']['root']['forum'] : 'forum.php?mod=forumdisplay&fid='.$cat[fid];}--&
&li&&a href=&$forumurl& title=&$cat[name]&&&!--{if $i &= '9'}--&$number{$i}&!--{else}--&{$i}&!--{/if}--&#$cat[name]&/a&&/li&
&!--{eval $i ++;}--&
&!--{/loop}--&
&!--{if $_G['setting']['search']}--&
&!--{eval $slist = array();}--&
&!--{if $_G['fid'] && $_G['forum']['status'] != 3 && $mod != 'group'}--&&!--{block slist[forumfid]}--&&li&&a href=&javascript:;& rel=&curforum& class=&curtype&&{lang
search_this_forum}&/a&&/li&&!--{/block}--&&!--{/if}--&
&!--{if $_G['setting']['portalstatus'] && $_G['setting']['search']['portal']['status'] && ($_G['group']['allowsearch'] & 1 || $_G['adminid'] == 1)}--&&!--{block slist
[portal]}--&&li&&a href=&javascript:;& rel=&article&{if CURSCRIPT == 'portal'} class=&curtype&{/if}&{lang article}&/a&&/li&&!--{/block}--&&!--{/if}--&
&!--{if $_G['setting']['search']['forum']['status'] && ($_G['group']['allowsearch'] & 2 || $_G['adminid'] == 1)}--&&!--{block slist[forum]}--&&li&&a href=&javascript:;&
rel=&forum&{if (CURSCRIPT == 'forum' && !$_G['fid']) || (CURSCRIPT == 'home' && in_array($do, array('thread', 'activity', 'poll', 'reward', 'debate', 'trade')))}
class=&curtype&{/if}&{lang thread}&/a&&/li&&!--{/block}--&&!--{/if}--&
&!--{if $_G['setting']['homestatus'] && $_G['setting']['search']['blog']['status'] && ($_G['group']['allowsearch'] & 4 || $_G['adminid'] == 1)}--&&!--{block slist
[blog]}--&&li&&a href=&javascript:;& rel=&blog&{if CURSCRIPT == 'home' && $do == 'blog'} class=&curtype&{/if}&{lang blog}&/a&&/li&&!--{/block}--&&!--{/if}--&
&!--{if $_G['setting']['homestatus'] && $_G['setting']['search']['album']['status'] && ($_G['group']['allowsearch'] & 8 || $_G['adminid'] == 1)}--&&!--{block slist
[album]}--&&li&&a href=&javascript:;& rel=&album&{if CURSCRIPT == 'home' && $do == 'album'} class=&curtype&{/if}&{lang album}&/a&&/li&&!--{/block}--&&!--{/if}--&
&!--{if $_G['setting']['groupstatus'] && $_G['setting']['search']['group']['status'] && ($_G['group']['allowsearch'] & 16 || $_G['adminid'] == 1)}--&&!--{block slist
[group]}--&&li&&a href=&javascript:;& rel=&group&{if CURSCRIPT == 'group' || $_G['basescript']=='group'} class=&curtype&{/if}&$_G['setting']['navs'][3]['navname']&/a&&/li&&!--
{/block}--&&!--{/if}--&
&!--{block slist[user]}--&&li&&a href=&javascript:;& rel=&user&{if (CURSCRIPT == 'home' && !in_array($do, array('blog', 'album', 'thread', 'activity', 'poll', 'reward',
'debate', 'trade'))) || $mod == 'ranklist'} class=&curtype&{/if}&{lang users}&/a&&/li&&!--{/block}--&
&!--{/if}--&
&!--{if $_G['setting']['search'] && $slist}--&
&div id=&sub-search&&
&form id=&scbar_form& method=&{if $_G[fid] && !empty($searchparams[0])}get{else}post{/if}& autocomplete=&off& onsubmit=&searchFocus($('scbar_txt'))& action=&{if
$_G[fid] && !empty($searchparams[0])}$searchparams[0]{else}search.php?searchsubmit=yes{/if}& target=&_blank&&
&input type=&hidden& name=&mod& id=&scbar_mod& value=&search& /&
&input type=&hidden& name=&formhash& value=&{FORMHASH}& /&
&input type=&hidden& name=&srchtype& value=&title& /&
&input type=&hidden& name=&srhfid& value=&$_G[fid]& id=&dzsearchforumid& /&
&input type=&hidden& name=&srhlocality& value=&$_G['basescript']::{CURMODULE}& /&
&!--{if !empty($searchparams[1])}--&
&!--{loop $searchparams[1] $key $value}--&
&!--{eval $srchotquery .= '&' . $key . '=' . $}--&
&input type=&hidden& name=&$key& value=&$value& /&
&!--{/loop}--&
&input type=&hidden& name=&source& value=&discuz& /&
&input type=&hidden& name=&fId& value=&&
id=&cloudsearchforumId& /&
&input type=&hidden& name=&q& id=&cloudsearchquery& value=&& /&
&!--{/if}--&
&input type=&text& name=&srchtxt& id=&scbar_txt& autocomplete=&off& class=&sub-search-key& placeholder=&搜你想要的...&&
&dl class=&sub-serach-switch&&
&dt id=&scbar_type& onclick=&showMenu(this.id)& hidefocus=&true&&{lang search}&/dt&
&input type=&submit& name=&searchsubmit& id=&scbar_btn& class=&sub-search-btn& value=&true&&
&!--{/if}--&
&ul id=&scbar_type_menu& class=&p_pop& style=&display: margin-top:0;&&&!--{echo implode('', $slist);}--&&/ul&
&script type=&text/javascript&&
initSearchmenu('scbar', '$searchparams[0]');
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有后使用快捷导航没有帐号？
只需一步，快速开始
查看: 2201|回复: 19
探讨+求助：如何展开浮动元素的高度，但不影响周围DIV的位置？
UID335823在线时间 小时积分3763帖子离线17232 天注册时间
金牌会员, 积分 3763, 距离下一级还需 1237 积分
我写了个简单的例子，现在点击红色方块中的展开，高度增加了，但是下面的其他DIV就会错位，
是否有办法让展开时，其他DIV都不动，只有序号为5的DIV顺势向下移动。
我知道把HTML结构换成三列浮动的形式，可以很轻松实现。可以处于实际需求，像以下代码这种结构，如何实现上述的效果。
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&无标题文档&/title&
a{color:#}
.box{width:690height:400overflow:}
.box .metro{width:200height:100padding:10background:#000;color:#margin:0px 10px 10px 0;float:}
.box .metro .entry{width:200height:100}
.box .metro.red{background:#f00;}
function $(id){
return document.getElementById(id)
function open(id,id2){
$(id).style.display='block';
$(id2).style.height='200px';
function close(id,id2){
$(id).style.display='none';
$(id2).style.height='100px';
&div class=&box&&
&div class=&metro&&1&/div&
&div class=&metro red& id=&two&&
&a href=&javascript:open('hiddenbox','two');&&展开&/a&
&a href=&javascript:close('hiddenbox','two');&&关闭&/a&
&div id=&hiddenbox& style=&display:&&fasdfadsfdasfdasfadsfadsfafd&/div&
&div class=&metro&&3&/div&
&div class=&metro&&4&/div&
&div class=&metro&&5&/div&
&div class=&metro&&6&/div&
&提示：您可以先修改部分代码再运行
UID616183在线时间 小时积分143帖子离线17232 天注册时间
初级会员, 积分 143, 距离下一级还需 57 积分
这个地方我也有些迷糊，等待高手解决，我也想学学
UID387318在线时间 小时积分3514帖子离线17232 天注册时间
金牌会员, 积分 3514, 距离下一级还需 1486 积分
根据你的需求再调整下
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&无标题文档&/title&
a{color:#}
.box{width:690height:400overflow:}
.box .metro{width:200height:100padding:10background:#000;color:#margin:0px 10px 10px 0;float:}
.box .metro .entry{width:200height:100}
.box .metro.red{background:#f00;}
function $(id){
return document.getElementById(id)
function open(id,id2){
$(id).style.display='block';
$(id2).querySelector('div').style.height='200px';
function close(id,id2){
$(id).style.display='none';
$(id2).querySelector('div').style.height='100px';
&div class=&box&&
&div class=&metro&&1&/div&
&div class=&metro red& id=&two&&
&div style=&position:background:&&
&a href=&javascript:open('hiddenbox','two');&&展开&/a&
&a href=&javascript:close('hiddenbox','two');&&关闭&/a&
&div id=&hiddenbox& style=&display:&&fasdfadsfdasfdasfadsfadsfafd&/div&
&div class=&metro&&3&/div&
&div class=&metro&&4&/div&
&div class=&metro&&5&/div&
&div class=&metro&&6&/div&
&提示：您可以先修改部分代码再运行
UID392892在线时间 小时积分604帖子离线17232 天注册时间
高级会员, 积分 604, 距离下一级还需 396 积分
3#的展开后5#没有下移 是否可以把直接分3快然后固定默认大小不设高度 展开后就自动向下了 设置下2个DIV之间的padding
UID336600在线时间 小时积分167帖子离线17232 天注册时间
初级会员, 积分 167, 距离下一级还需 33 积分
用margin可以做到
红色的添加 CSS position:
点击展开&&红色的添加CSS margin-bottom:-100&&，5号添加CSS margin-top:100
点击关闭后 取消添加的CSS
UID498562在线时间 小时积分89帖子离线17232 天注册时间
初级会员, 积分 89, 距离下一级还需 111 积分
本帖最后由 laozuo957 于
14:47 编辑
看需要不需要改结构了
& &&&1.如果能改结构 把1 和 4 放在一个盒子里，2和5放在一个盒子里，3和6放在一个盒子里。不固定外面盒子的高度，盒子里面的 2 高度增加的时候，5自然被挤下去了。
& &&&2.如果不能改结构。如果能够提前知道点击2 红色盒子的时候，所展开的高度，然后根据这个高度来对 5（盒子） 来进行调节，需要使用定位。就如楼上提到的。
UID498562在线时间 小时积分89帖子离线17232 天注册时间
初级会员, 积分 89, 距离下一级还需 111 积分
本帖最后由 laozuo957 于
14:52 编辑
我不会贴代码……
UID498562在线时间 小时积分89帖子离线17232 天注册时间
初级会员, 积分 89, 距离下一级还需 111 积分
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&无标题文档&/title&
a{color:#}
.box{width:690height:400overflow:}
.box .metro{width:200height:100padding:10background:#000;color:#margin:0px 10px 10px 0;}
.box .metro .entry{width:200height:100}
.box .metro.red{background:#f00;}
.fl {float:}
function $(id){
&&return document.getElementById(id)
function open(id,id2){
&&$(id).style.display='block';
&&$(id2).style.height='200px';
function close(id,id2){
&&$(id).style.display='none';
&&$(id2).style.height='100px';
&div class=&box&&
& & & & &p&改变结构后的方法~&/p&
& & & & &div class=&fl&&
& & & & & & & &&&&div class=&metro&&1&/div&
& & & & & & & &&&&div class=&metro&&4&/div&
& & & & &/div&
& & &div class=&fl&&
& & & & & & & & &div class=&metro red& id=&two&&
& & & & & & & && & &a href=&javascriptpen('hiddenbox','two');&&展开&/a&
& & & & & & & && & &a href=&javascript:close('hiddenbox','two');&&关闭&/a&
& & & & & & & && & &div id=&hiddenbox& style=&display:&&fasdfadsfdasfdasfadsfadsfafd&/div&
& & & & & & & & &/div&
& & & & & & & & &div class=&metro&&5&/div&
& & & & &/div&
& & & & &div class=&fl&&
& & & & & & & & &div class=&metro&&3&/div&& &
& & & & & & & & &div class=&metro&&6&/div&
& & & & &/div&
UID335823在线时间 小时积分3763帖子离线17232 天注册时间
金牌会员, 积分 3763, 距离下一级还需 1237 积分
其实原帖里我提到了我知道把HTML结构换成三列浮动的形式，可以很轻松实现。可以处于实际需求，像以下代码这种结构，如何实现上述的效果。，就如楼上的做法。
不过难度就在于不能用这种结构。
换个思路，不知道有没有什么JQUERY之类的，可以去实现，其实我感觉当它撑开后，方块5被挤下去，其他DIV保持不变，这种貌似有些类似瀑布流的原理。
UID347463在线时间 小时积分1059帖子离线17232 天注册时间
银牌会员, 积分 1059, 距离下一级还需 1941 积分
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&link rel=&stylesheet& type=&text/css& href=&/css/cuctv.css& /&
&script type=&text/javascript& src=&/js/jquery-1.4.2.min.js&&&/script&
&title&无标题文档&/title&
a{color:#}
.box{width:690height:400overflow:}
.box .metro{width:200height:100padding:10background:#000;color:#margin:0px 10px 10px 0;float:}
.box .metro .entry{width:200height:100}
.box .metro.red{background:#f00; position:relative}
#hiddenbox{ height:200px}
$(function(){
$(&#two .btn&).toggle(function(){
$(this).text(&关闭&);
$(&#hiddenbox&).fadeIn();
},function(){
$(this).text(&展开&);
$(&#hiddenbox&).fadeOut();
&div class=&box&&
&div class=&metro&&1&/div&
&div class=&metro red& id=&two&&
&div style=&position:background:&&
&span class=&btn&&展开&/span&
&div id=&hiddenbox& style=&display:&&fasdfadsfdasfdasfadsfadsfafd&/div&
&div class=&metro&&3&/div&
&div class=&metro&&4&/div&
&div class=&metro&&5&/div&
&div class=&metro&&6&/div&
&提示：您可以先修改部分代码再运行
UID335823在线时间 小时积分3763帖子离线17232 天注册时间
金牌会员, 积分 3763, 距离下一级还需 1237 积分
yaoyaoqi 发表于
楼上，最主要是点击展开后，红色下面的那块要顺势往下移动
UID584678在线时间 小时积分2295帖子离线17232 天注册时间
银牌会员, 积分 2295, 距离下一级还需 705 积分
BadJohnny 发表于
楼上，最主要是点击展开后，红色下面的那块要顺势往下移动
绝对定位即可
UID336600在线时间 小时积分167帖子离线17232 天注册时间
初级会员, 积分 167, 距离下一级还需 33 积分
本帖最后由 yylt 于
17:26 编辑
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&script src=&/ajax/libs/jquery/1.7.2/jquery.min.js& type=&text/javascript&&&/script&
&title&无标题文档&/title&
height:400
.box .metro {
height:100
padding:10
background:#000;
margin:0px 10px 10px 0;
.box .metro .entry {
height:100
.box .metro.red {
background:#f00;
&div class=&box&&
&div class=&metro&&1&/div&
&div class=&metro red& id=&two&& &a
class=&openButton&&展开&/a& &a
class=&closeButton&&关闭&/a&
&div id=&hiddenbox& style=&display:&&fasdfadsfdasfdasfadsfadsfafd&/div&
&div class=&metro&&3&/div&
&div class=&metro&&4&/div&
&div class=&metro&&5&/div&
&div class=&metro&&6&/div&
$(&.openButton&).click(function(){
$(&#two&).height(&200px&).css(&margin-bottom&,&-100px&);
$(&.metro:eq(4)&).css(&margin-top&,&100px&);
$(&.closeButton&).click(function(){
$(&#two&).height(&100px&).css(&margin-bottom&,&0px&);
$(&.metro:eq(4)&).css(&margin-top&,&0px&);
&提示：您可以先修改部分代码再运行
不会Javascrpt&&刚刚接触Jquery ，提供个简单的方案
思路如我5楼说的那样
补充内容 ( 17:28):
用Javascrpt 应该很容易实现 其实就是增加和删去 CSS
补充内容 ( 17:31):
不改任何结构
UID335823在线时间 小时积分3763帖子离线17232 天注册时间
金牌会员, 积分 3763, 距离下一级还需 1237 积分
本帖最后由 BadJohnny 于
17:57 编辑
13楼这个不错！
我改变了一下行为，改成鼠标滑出和滑入了。
再多问一种假设，
如果这种方块是循环输出的，数量不一定，怎么样可以不用把这段JS放到循环当中，也能让每个方块各自都能有这个效果呢？
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&script src=&/ajax/libs/jquery/1.7.2/jquery.min.js& type=&text/javascript&&&/script&
&title&无标题文档&/title&
height:400
.box .metro {
height:100
padding:10
background:#000;
margin:0px 10px 10px 0;
.box .metro .entry {
height:100
.box .metro.red {
background:#f00;
&div class=&box&&
&div class=&metro&&1&/div&
&div class=&metro red&&2&/div&
&div class=&metro&&3&/div&
&div class=&metro&&4&/div&
&div class=&metro&&5&/div&
&div class=&metro&&6&/div&
$(&.red&).mouseover(function(){
$(this).height(&200px&).css(&margin-bottom&,&-100px&);
$(&.metro:eq(4)&).css(&margin-top&,&100px&);
$(&.red&).mouseout(function(){
$(this).height(&100px&).css(&margin-bottom&,&0px&);
$(&.metro:eq(4)&).css(&margin-top&,&0px&);
&提示：您可以先修改部分代码再运行
UID336600在线时间 小时积分167帖子离线17232 天注册时间
初级会员, 积分 167, 距离下一级还需 33 积分
BadJohnny 发表于
<font color="#楼这个不错！
我改变了一下行为，改成鼠标滑出和滑入了。
再多问一种假设，
只要有了方法，其实循环也是很好解决的。根据宽度计算出每行有多少个div，然后控制同一列内容即可
UID336600在线时间 小时积分167帖子离线17232 天注册时间
初级会员, 积分 167, 距离下一级还需 33 积分
加个动画玩玩
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&script src=&/ajax/libs/jquery/1.7.2/jquery.min.js& type=&text/javascript&&&/script&
&title&无标题文档&/title&
height:400
.box .metro {
height:100
padding:10
background:#000;
margin:0px 10px 10px 0;
.box .metro .entry {
height:100
.box .metro.red {
background:#f00;
&div class=&box&&
&div class=&metro&&1&/div&
&div class=&metro red& id=&two&& &a
class=&openButton&&展开&/a& &a
class=&closeButton&&关闭&/a&
&div id=&hiddenbox& style=&display:&&fasdfadsfdasfdasfadsfadsfafd&/div&
&div class=&metro&&3&/div&
&div class=&metro&&4&/div&
&div class=&metro&&5&/div&
&div class=&metro&&6&/div&
$(document).ready(function(e) {
$(&.openButton&).click(function(){
$(&#two&).animate({height:&200px& , marginBottom: &-100px&}, 1000);
$(&.metro:eq(4)&).animate({marginTop:&100px&} , 150);
//打开动画
$(&.closeButton&).click(function(){
$(&#two&).animate({height:&100px& , marginBottom: &0px& }, 150);
$(&.metro:eq(4)&).animate({marginTop:&0px&} , 1000);
&提示：您可以先修改部分代码再运行
UID335823在线时间 小时积分3763帖子离线17232 天注册时间
金牌会员, 积分 3763, 距离下一级还需 1237 积分
好像我按照现在这些代码以此类推的去添加到其他方块上，还是会出现些问题的
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&script src=&/ajax/libs/jquery/1.7.2/jquery.min.js& type=&text/javascript&&&/script&
&title&无标题文档&/title&
height:400
.box .metro {
height:100
background:#000;
margin:0px 10px 10px 0;
.box .metro .entry {
height:100
.box .metro.red {
background:#f00;
.box .metro .small{
height:100
margin-right:10
background:#900;
.box .metro .small.last{
margin-right:0;
&div class=&box&&
&div class=&metro one&&1&/div&
&div class=&metro two&&2&/div&
&div class=&metro three&&3&/div&
&div class=&metro four&&4&/div&
&div class=&metro&&
&div class=&small&&5&/div&
&div class=&small last&&&/div&
&div class=&metro&&6&/div&
&div class=&metro sev&&7&/div&
&div class=&metro ei&&
&div class=&small&&8&/div&
&div class=&small last&&&/div&
&div class=&metro nine&&9&/div&
$(&.one&).mouseover(function(){
$(this).height(&200px&).css(&margin-bottom&,&-100px&);
$(&.metro:eq(3)&).css(&margin-top&,&100px&);
$(&.one&).mouseout(function(){
$(this).height(&100px&).css(&margin-bottom&,&0px&);
$(&.metro:eq(3)&).css(&margin-top&,&0px&);
$(&.two&).mouseover(function(){
$(this).height(&200px&).css(&margin-bottom&,&-100px&);
$(&.metro:eq(4)&).css(&margin-top&,&100px&);
$(&.two&).mouseout(function(){
$(this).height(&100px&).css(&margin-bottom&,&0px&);
$(&.metro:eq(4)&).css(&margin-top&,&0px&);
$(&.three&).mouseover(function(){
$(this).height(&200px&).css(&margin-bottom&,&-100px&);
$(&.metro:eq(5)&).css(&margin-top&,&100px&);
$(&.three&).mouseout(function(){
$(this).height(&100px&).css(&margin-bottom&,&0px&);
$(&.metro:eq(5)&).css(&margin-top&,&0px&);
$(&.fore&).mouseover(function(){
$(this).height(&200px&).css(&margin-bottom&,&-100px&);
$(&.metro:eq(6)&).css(&margin-top&,&100px&);
$(&.four&).mouseout(function(){
$(this).height(&100px&).css(&margin-bottom&,&0px&);
$(&.metro:eq(6)&).css(&margin-top&,&0px&);
&提示：您可以先修改部分代码再运行
UID619410在线时间 小时积分20帖子离线17232 天注册时间
新手上路, 积分 20, 距离下一级还需 30 积分
不错！看看了
UID619410在线时间 小时积分20帖子离线17232 天注册时间
新手上路, 积分 20, 距离下一级还需 30 积分
www.cetour.net不错
UID589978在线时间 小时积分243帖子离线17232 天注册时间
中级会员, 积分 243, 距离下一级还需 257 积分
感谢你的分享
Powered by查看: 5702|回复: 10
margin-bottom:0px为什么不起作用？
米农, 积分 227, 距离下一级还需 9773 积分
米农, 积分 227, 距离下一级还需 9773 积分
城市币17 元
在线时间21 小时
阅读权限20
主题帖子城市币
请教各位高人：
我已经在.css文件里设成：margin-bottom:0 希望网站底部文字和浏览器底部靠近，但是不知道为什么还是不起作用。
当文字少的时候，网站底部文字还是和浏览器底部有很大间隙，仍是和上部靠拢而不是和下部。不知道什么原因？应该怎么办？
&div id=&footer& &
& & & & & & & & &div id=&footer_ICP&&&/div&
& & & & & & & & &div id=&footer_copyright&&
& && &&&& & & &&&&&
& && && && &bbbbb &nnnnn &&
& & & & & & & & &/div&
& & & & &/div&
style.css文件
& && &&&& & & &
& && &&&margin-bottom:0
& & & & padding:0
& & & & width:1002
& & & & height:20
& & & & border-bottom:1px solid #E6E6E6;
& & & & background:#F3F4F6 url(../Images/bg_copyright.gif) 251px 10px no-
& & & & color:#999999;
& & & & text-align:
& & & & line-height:150%;
#footer a{
& & & & color:#FFFFFF;
#footer_ICP {
& & & & float:
& & & & padding-top:8
& & & & width:252
& & & & height:10
& & & & text-align:
& & & & line-height:150%;
#footer_copyright {
& & & & float:
& & & & padding:10px 20px 10px 40
& & & & width:690
& & & & height:20
& & & & text-align:
& & & & line-height:150%;
富商, 积分 38282, 距离下一级还需 11718 积分
富商, 积分 38282, 距离下一级还需 11718 积分
城市币2492 元
在线时间3579 小时
阅读权限100
主题帖子城市币
html,body{margin:0;padding:0}
米农, 积分 227, 距离下一级还需 9773 积分
米农, 积分 227, 距离下一级还需 9773 积分
城市币17 元
在线时间21 小时
阅读权限20
主题帖子城市币
还是不行啊
还是不行啊！加后代码如下。
& & & & background:#FFFFFF;
html,body{margin:0;padding:0}
& & & & margin:0
& & & & width:1002
& & & & font-size:12
& & & & background:url(../Images/bg_body.png) 0px 100%px repeat-x;
& & & & color:#0033FF;
& & & & font-family:Tahoma, Verdana, Arial, Helvetica, sans-
米农, 积分 227, 距离下一级还需 9773 积分
米农, 积分 227, 距离下一级还需 9773 积分
城市币17 元
在线时间21 小时
阅读权限20
主题帖子城市币
米商, 积分 26275, 距离下一级还需 3725 积分
米商, 积分 26275, 距离下一级还需 3725 积分
城市币85 元
在线时间2620 小时
阅读权限50
主题帖子城市币
不要直接定义body的width
建议body里装个大盒子
比如
&body&
&div id=&box&&
& & &div id=&header&&&/div&
& & &div id=&content&&&/div&
& & &div id=&footer&&&/div&
&/div&
&/body&
复制代码
然后在css里简单点的可以这样
*{margin:0;padding:0}
body{}
#box{width:960 margin:0 auto}
复制代码
你也不需要在设置footer的margin-bottom:0
[ 本帖最后由 cngoogle 于
09:35 编辑 ]
米农, 积分 227, 距离下一级还需 9773 积分
米农, 积分 227, 距离下一级还需 9773 积分
城市币17 元
在线时间21 小时
阅读权限20
主题帖子城市币
还是不行啊
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&meta name=©right& content=&hhhhhh& /&
&meta name=&Author& content=&hhhhhh& /&
&meta name=&Keywords& content=&hhhhhhh& /&
&meta name=&Description& content=&hhhhhhhh& /&
&title&hhhhhhh&/title&
&script language=&javascript& src=&../Script/Html.js&&&/script&
&link href=&Css/Style.css& rel=&stylesheet& type=&text/css&&
&style type=&text/css&&
.STYLE1 {color: #FFFFFF}
& & & & &div id=&header& &
& & & & & & & & &div class=&header_logo& &&img src=&Images/head_logo.gif& width=&32&
height=&24& /&&/div&
& & & & & & & & &div class=&header_link&&
& & & & & & & & & & & &&&&/div&
& & & & & & & & &div id=&mainMenu&&&ul&&li id=&mainMenu1&&&a&&href=&main.asp& &hhhh
&/a&&/li&&li id=&mainMenu2&&&a&&href=&About.asp& &hhhhh&/a&&ul
onMouseOver=&document.getElementById('mainMenu2').style.backgroundImage='url()'&
onMouseOut=&document.getElementById('mainMenu2').style.backgroundImage='url()'&&&li&&a
href=&about.asp&&hhhhhh&/a&&/li&&li&&a href=&about1.asp&&hhhhh&/a&&/li&&li&&a
href=&About2.asp&&hhhhh&/a&&/li&&li&&a href=&About3.asp&&hhhhhh
&/a&&/li&&/ul&&/li&&li id=&mainMenu4&&&a&&href=&NewsList.asp& &hhhhhh&/a&&ul
onMouseOver=&document.getElementById('mainMenu4').style.backgroundImage='url()'&
onMouseOut=&document.getElementById('mainMenu4').style.backgroundImage='url()'&&&li&&a
href=&NewsList.asp&&hhhhh&/a&&/li&&li&&a href=&NewsList.asp&&hhhhh&/a&&/li&&li&&a
href=&NewsList.asp&&hhhhh&/a&&/li&&li&&a href=&NewsList.asp&&hhhhh
&/a&&/li&&/ul&&/li&&li id=&mainMenu3&&&a&&href=&ProductList.asp& &hhhhhh&/a&&ul
onMouseOver=&document.getElementById('mainMenu2').style.backgroundImage='url()'&
onMouseOut=&document.getElementById('mainMenu2').style.backgroundImage='url()'&&&li&&a
href=&ProductView1.asp&&hhhhhh&/a&&/li&&li&&a href=&ProductView2.asp&&hhhh&/a&&/li&&li&&a href=&ProductList.asp?SortID=48&&hhhhh
&/a&&/li&&/li&&/ul&&/li&&li id=&mainMenu5&&&a&&href=&JobsList.asp& &hhhhhhh&/a&&/li&&li
id=&mainMenu6&&&a&&href=&../wssc/Index.asp& target=&_blank&&hhhh&/a&&ul
onMouseOver=&document.getElementById('mainMenu4').style.backgroundImage='url()'&
onMouseOut=&document.getElementById('mainMenu4').style.backgroundImage='url()'&&&li&&a
href=&../wssc/Index.asp& target=&_blank&&hhhh    hhhh&/a&&/ul&&/li&&li
id=&mainMenu7&&&a&&href=&../bbs/Index.asp&&&target=&_blank& &hhhhh&/a&&ul
onMouseOver=&document.getElementById('mainMenu4').style.backgroundImage='url()'&
onMouseOut=&document.getElementById('mainMenu4').style.backgroundImage='url()'&&&li&&a
href=&../bbs/Index.asp&&&target=&_blank&&hhhh     hhhh&/a&&/ul&&/div&
& & & & & & & & &div class=&header_checkmember&&&/div&
& & & & & & & & &div class=&header_banner&&&div align=¢er&&
&div id=&topcen&&&/div&
& & & & &/div&
& & & & &div id=&bodyer_page&&
& & & & & & & & &div id=&mainSidebar&&
& && &&&& & & & &div class=&subject&&
& && &&&& & & & & & & & &div class=&subject_name&&&img
src=&Images/subject_menu.gif&/&&/div&
& && &&&& & & & & & & & &div class=&pageMenu&&&img
src=&Images/arrow_05.gif&&&&&a href=&JobsList.asp&&hhhhh
&/a&&br/&&&&/div&&/div&
& && &&&& & & & &div class=&subject&&
& && &&&& & & & & & & & &div class=&subject_name&&&img
src=&Images/subject_menu.gif&/&&/div&
& && &&&& & & & & & & & &div class=&search&&&/div&
& && && && &&/div&
& & & & & & & & &/div&
& & & & & & & & &div id=&pageBody&&
& && & & & & & & & & & &div class=&pageLocation&&&a href=&../index.asp&&hhhh&/a&&img
src=&Images/arrow_07.gif& /&&a href=&jobslist.asp&&hhhhh&/a&&/div&
& && & & & & & & & & & &div class=&pageContent&&&div class=&pageContent_list&&&table
width=&100%&& &tr&& &&td&&b&hhhhh&/b&&/td&& &&td&&b&hhhhh&/b&&/td&& &&td&&b&hhhhh&/b&&/td&& &&td width=&64&&&b&hhhh&/b&&/td&& &&td width=&46&&&b&状态&/b&&/td&& &
&td width=&60&&&b&更新时间&/b&&/td&&&&/tr& &tr&& &&td&&a href=&JobsView1.asp&&hhhhh
&/a&&/td&& &&td&hhhh&/td&& &&td&hhhh&/td&& &&td&1人&/td&& &&td&hhhh&/td&& &
&td&&/td&&&&/tr&
&tr&& &&td&&a href=&JobsView2.asp&&hhhh&/a&&/td&& &&td&hhhhh&/td&& &&td&hhh&/td&
&&&td&1人&/td&& &&td&hhhhh&/td&& & &td&&/td&&&&/tr&
&/table&&/div&&div class=&pageContent_end&&
|&共计：&font color=&#ff6600&&2&/font&条记录&&页次：&font
color=&#ff6600&&1&/font&&/strong&/1&&每页：&font color=&#ff6600&&20&/font&条
&&font color=&#ff6600&&1&/font&&&/div&
& && &&&&/div&
& & & & &/div&
& & & & &div id=&footer& &
& & & & & & & & &div id=&footer_ICP&&&/div&
& & & & & & & & &div id=&footer_copyright&&
& && &&&& & & &&+86-088
888888 &&&&
& && && && &(C) 2000&hhhhh &&
& & & & & & & & &/div&
& & & & &/div&
.css文件部分
/*------------------------全局--------------------*/
& & & & background:#FFFFFF;
& & & & margin:0
& & & & width:1002
& & & & font-size:12
& & & & background:url(../Images/bg_body.png) 0px 100%px repeat-x;
& & & & color:#0033FF;
& & & & font-family:Tahoma, Verdana, Arial, Helvetica, sans-
img,form,ul,p{
& & & & margin:0
& & & & padding:0
& & & & border:0
input,textarea,select {
& & & & color:#666666;
& & & & font-size:12
& & & & font-family:Tahoma, Verdana, Arial, Helvetica, sans-
& & & & color:#666666;
& & & & text-decoration:
& & & & color:#FF3300;
/*------------------------------------------------*/
/*通用_页面容器------------------------------------*/
#container{
/*通用_页面头部--------------------------*/
& & & & margin:
& & & & padding-top:15
& & & & width:1002
& & & & height:319
& & & & background:url(../Images/head_bg.jpg) no-
.header_logo{
& & & & float:
& & & & padding:0 0 15px 16
& & & & width:200
& & & & height:56
/*小字链接*/
.header_link{
& & & & float:
& & & & padding:0px 46px 15px 0
& & & & width:740
& & & & height:42
& & & & text-align:
/*主菜单，有下拉*/
#mainMenu{
& & & & float:
& & & & padding-left:26
& & & & list-style-type:
#mainMenu ul li{
& & & & float:
& & & & margin-right:2
& & & & list-style:
#mainMenu ul li a{
& & & & display:
& & & & padding-top:12
& & & & width:70
& & & & height:20
& & & & text-align:
& & & & color:#FFFFFF;
#mainMenu ul li a:hover{
#mainMenu ul li ul {
& & & & list-style-type:
& & & & text-align:
& & & & left:-999
& & & & width:80
& & & & position:
#mainMenu ul li ul li{
& & & & float:
& & & & width:142
& & & & height:24
& & & & border-top:1px solid #FFFFFF;
& & & & background:#5AC05A;
#mainMenu ul li ul li a{
& & & & display:
& & & & padding:6px 6px 6px 6
& & & & width:130
& & & & height:12
& & & & text-align:
#mainMenu ul li ul li a:hover{
& & & & background: #78C178;
#mainMenu ul li:hover ul{
& & & & left:
#mainMenu ul li.sfhover ul{
& & & & left:
/*检查会员是否登录*/
.header_checkmember{
& & & & float:
& & & & padding:9px 0px 0px 0
& & & & width:196
& & & & height:12
& & & & color:#FFFFFF;
.header_checkmember a{
& & & & color:#333333;
& & & & text-decoration:
.header_checkmember a:hover{
& & & & color:#E00000;
/*大幅广告条*/
.header_banner{
& & & & float:
& & & & padding:1px 0
& & & & width:1002
& & & & height:228
/*通用_页面底部--------------------------*/
& & & & padding:0
& & & & width:1002
& & & & height:20
& & & & border-bottom:1px solid #E6E6E6;
& & & & background:#F3F4F6 url(../Images/bg_copyright.gif) 251px 10px no-
& & & & color:#999999;
& & & & text-align:
& & & & line-height:150%;
#footer a{
& & & & color:#FFFFFF;
#footer_ICP {
& & & & float:
& & & & padding-top:8
& & & & width:252
& & & & height:10
& & & & text-align:
& & & & line-height:150%;
#footer_copyright {
& & & & float:
& & & & padding:10px 20px 10px 40
& & & & width:690
& & & & height:20
& & & & text-align:
& & & & line-height:150%;
/*通用_页面主体--------------------------*/
/*首页内页相同*/
/*首页内页不同之首页*/
#bodyer_index{
& & & & overflow:
& & & & margin:15
& & & & width:1002
& & & & background:url(../Images/bg_bodyer_index.gif) 251px 334px repeat-y;
/*首页内页不同之内页*/
#bodyer_page{
& & & & overflow:
& & & & margin:15
& & & & width:1002
& & & & background:url(../Images/bg_bodyer_page.gif) 251px 0px repeat-y;
/*第一边栏*/
#mainSidebar{
& & & & float:
& & & & padding:3px 17
& & & & width:218
/*第二边栏*/
#subSidebar{
& & & & float:
& & & & padding:3px 17
& & & & width:160
/*边栏以外的主体区域，即核心内容区，首页内页相同*/
#indexpageBody{
米商, 积分 26275, 距离下一级还需 3725 积分
米商, 积分 26275, 距离下一级还需 3725 积分
城市币85 元
在线时间2620 小时
阅读权限50
主题帖子城市币
终于明白LZ的意思了
你的网页本身没错，你的想法也没错，但你所认为的错了
底部和浏览器有那么大的空挡是自然的，因为底部本身就是网页的内容
网页的内容是从上而下慢慢堆叠的，你上面没有足够的内容使底部往下撑，底部当然和浏览器有空挡了
这个空挡不是margin-bottom
米农, 积分 227, 距离下一级还需 9773 积分
米农, 积分 227, 距离下一级还需 9773 积分
城市币17 元
在线时间21 小时
阅读权限20
主题帖子城市币
难道说。就只能插一块白板图了？
米商, 积分 26275, 距离下一级还需 3725 积分
米商, 积分 26275, 距离下一级还需 3725 积分
城市币85 元
在线时间2620 小时
阅读权限50
主题帖子城市币
正常来说是这样的
你可以写死中间内容区域的高度，这样底部就下来了
你也可以去网上找一下一些javascript的控制代码，可以使底部一直悬浮于浏览器底部的
最好还是自然一些好了
米农, 积分 227, 距离下一级还需 9773 积分
米农, 积分 227, 距离下一级还需 9773 积分
城市币17 元
在线时间21 小时
阅读权限20
主题帖子城市币
哦，多谢高手
哦，多谢高手！
旗下品牌 -
&&论坛管理员邮箱：}
&!DOCTYPE html&
.clearfix {
height: 0;
padding: 0;
font-size: 0;
line-height: 0;
&div class=&main& style=&width:500border:1margin:0&&
&div style=&float:border:1&&
dasdsadsad
&div style=&float:border:1&&
&div class=&clearfix&&&/div&
关键 就是 在 增加浮动层，使用伪类 及 伪元素（:after） 都可。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：4959024次
积分：46488
积分：46488
排名：第55名
原创：227篇
转载：2365篇
评论：519条
(9)(7)(74)(67)(96)(177)(114)(86)(40)(43)(73)(15)(10)(17)(12)(6)(20)(27)(54)(71)(97)(74)(32)(2)(24)(21)(62)(60)(36)(23)(27)(46)(34)(76)(63)(121)(142)(74)(54)(120)(77)(42)(4)(12)(19)(1)(9)(15)(19)(18)(16)(31)(79)(68)&div id=&sub-header&&
&div class=&layout&&
&a id=&sub-logo& href=&{$_G[siteurl]}&&&img src=&/style/images/small_logo.jpg& title=&$_G['setting']['bbname']& alt=&$_G['setting']['bbname']& /&&/a&
&div id=&sub-menu&&
&dl class=&menu-nav&&
&dt&&a href=&{$_G[siteurl]}& onMouseOver=&showMenu({'ctrlid':'twt','duration':'2'});&&123&/a&&/dt&
&dd id=&twt_menu& class=&nav-floor& style=&display:&&
&!--{eval $i = 1;}--&
&!--{loop $catlist $cat}--&
&!--{eval $forumurl = !empty($forum['domain']) && !empty($_G['setting']['domain']['root']['forum']) ? 'http://'.$forum
['domain'].'.'.$_G['setting']['domain']['root']['forum'] : 'forum.php?mod=forumdisplay&fid='.$cat[fid];}--&
&li&&a href=&$forumurl& title=&$cat[name]&&&!--{if $i &= '9'}--&$number{$i}&!--{else}--&{$i}&!--{/if}--&#$cat[name]&/a&&/li&
&!--{eval $i ++;}--&
&!--{/loop}--&
&!--{if $_G['setting']['search']}--&
&!--{eval $slist = array();}--&
&!--{if $_G['fid'] && $_G['forum']['status'] != 3 && $mod != 'group'}--&&!--{block slist[forumfid]}--&&li&&a href=&javascript:;& rel=&curforum& class=&curtype&&{lang
search_this_forum}&/a&&/li&&!--{/block}--&&!--{/if}--&
&!--{if $_G['setting']['portalstatus'] && $_G['setting']['search']['portal']['status'] && ($_G['group']['allowsearch'] & 1 || $_G['adminid'] == 1)}--&&!--{block slist
[portal]}--&&li&&a href=&javascript:;& rel=&article&{if CURSCRIPT == 'portal'} class=&curtype&{/if}&{lang article}&/a&&/li&&!--{/block}--&&!--{/if}--&
&!--{if $_G['setting']['search']['forum']['status'] && ($_G['group']['allowsearch'] & 2 || $_G['adminid'] == 1)}--&&!--{block slist[forum]}--&&li&&a href=&javascript:;&
rel=&forum&{if (CURSCRIPT == 'forum' && !$_G['fid']) || (CURSCRIPT == 'home' && in_array($do, array('thread', 'activity', 'poll', 'reward', 'debate', 'trade')))}
class=&curtype&{/if}&{lang thread}&/a&&/li&&!--{/block}--&&!--{/if}--&
&!--{if $_G['setting']['homestatus'] && $_G['setting']['search']['blog']['status'] && ($_G['group']['allowsearch'] & 4 || $_G['adminid'] == 1)}--&&!--{block slist
[blog]}--&&li&&a href=&javascript:;& rel=&blog&{if CURSCRIPT == 'home' && $do == 'blog'} class=&curtype&{/if}&{lang blog}&/a&&/li&&!--{/block}--&&!--{/if}--&
&!--{if $_G['setting']['homestatus'] && $_G['setting']['search']['album']['status'] && ($_G['group']['allowsearch'] & 8 || $_G['adminid'] == 1)}--&&!--{block slist
[album]}--&&li&&a href=&javascript:;& rel=&album&{if CURSCRIPT == 'home' && $do == 'album'} class=&curtype&{/if}&{lang album}&/a&&/li&&!--{/block}--&&!--{/if}--&
&!--{if $_G['setting']['groupstatus'] && $_G['setting']['search']['group']['status'] && ($_G['group']['allowsearch'] & 16 || $_G['adminid'] == 1)}--&&!--{block slist
[group]}--&&li&&a href=&javascript:;& rel=&group&{if CURSCRIPT == 'group' || $_G['basescript']=='group'} class=&curtype&{/if}&$_G['setting']['navs'][3]['navname']&/a&&/li&&!--
{/block}--&&!--{/if}--&
&!--{block slist[user]}--&&li&&a href=&javascript:;& rel=&user&{if (CURSCRIPT == 'home' && !in_array($do, array('blog', 'album', 'thread', 'activity', 'poll', 'reward',
'debate', 'trade'))) || $mod == 'ranklist'} class=&curtype&{/if}&{lang users}&/a&&/li&&!--{/block}--&
&!--{/if}--&
&!--{if $_G['setting']['search'] && $slist}--&
&div id=&sub-search&&
&form id=&scbar_form& method=&{if $_G[fid] && !empty($searchparams[0])}get{else}post{/if}& autocomplete=&off& onsubmit=&searchFocus($('scbar_txt'))& action=&{if
$_G[fid] && !empty($searchparams[0])}$searchparams[0]{else}search.php?searchsubmit=yes{/if}& target=&_blank&&
&input type=&hidden& name=&mod& id=&scbar_mod& value=&search& /&
&input type=&hidden& name=&formhash& value=&{FORMHASH}& /&
&input type=&hidden& name=&srchtype& value=&title& /&
&input type=&hidden& name=&srhfid& value=&$_G[fid]& id=&dzsearchforumid& /&
&input type=&hidden& name=&srhlocality& value=&$_G['basescript']::{CURMODULE}& /&
&!--{if !empty($searchparams[1])}--&
&!--{loop $searchparams[1] $key $value}--&
&!--{eval $srchotquery .= '&' . $key . '=' . $}--&
&input type=&hidden& name=&$key& value=&$value& /&
&!--{/loop}--&
&input type=&hidden& name=&source& value=&discuz& /&
&input type=&hidden& name=&fId& value=&&
id=&cloudsearchforumId& /&
&input type=&hidden& name=&q& id=&cloudsearchquery& value=&& /&
&!--{/if}--&
&input type=&text& name=&srchtxt& id=&scbar_txt& autocomplete=&off& class=&sub-search-key& placeholder=&搜你想要的...&&
&dl class=&sub-serach-switch&&
&dt id=&scbar_type& onclick=&showMenu(this.id)& hidefocus=&true&&{lang search}&/dt&
&input type=&submit& name=&searchsubmit& id=&scbar_btn& class=&sub-search-btn& value=&true&&
&!--{/if}--&
&ul id=&scbar_type_menu& class=&p_pop& style=&display: margin-top:0;&&&!--{echo implode('', $slist);}--&&/ul&
&script type=&text/javascript&&
initSearchmenu('scbar', '$searchparams[0]');
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有后使用快捷导航没有帐号？
只需一步，快速开始
查看: 2201|回复: 19
探讨+求助：如何展开浮动元素的高度，但不影响周围DIV的位置？
UID335823在线时间 小时积分3763帖子离线17232 天注册时间
金牌会员, 积分 3763, 距离下一级还需 1237 积分
我写了个简单的例子，现在点击红色方块中的展开，高度增加了，但是下面的其他DIV就会错位，
是否有办法让展开时，其他DIV都不动，只有序号为5的DIV顺势向下移动。
我知道把HTML结构换成三列浮动的形式，可以很轻松实现。可以处于实际需求，像以下代码这种结构，如何实现上述的效果。
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&无标题文档&/title&
a{color:#}
.box{width:690height:400overflow:}
.box .metro{width:200height:100padding:10background:#000;color:#margin:0px 10px 10px 0;float:}
.box .metro .entry{width:200height:100}
.box .metro.red{background:#f00;}
function $(id){
return document.getElementById(id)
function open(id,id2){
$(id).style.display='block';
$(id2).style.height='200px';
function close(id,id2){
$(id).style.display='none';
$(id2).style.height='100px';
&div class=&box&&
&div class=&metro&&1&/div&
&div class=&metro red& id=&two&&
&a href=&javascript:open('hiddenbox','two');&&展开&/a&
&a href=&javascript:close('hiddenbox','two');&&关闭&/a&
&div id=&hiddenbox& style=&display:&&fasdfadsfdasfdasfadsfadsfafd&/div&
&div class=&metro&&3&/div&
&div class=&metro&&4&/div&
&div class=&metro&&5&/div&
&div class=&metro&&6&/div&
&提示：您可以先修改部分代码再运行
UID616183在线时间 小时积分143帖子离线17232 天注册时间
初级会员, 积分 143, 距离下一级还需 57 积分
这个地方我也有些迷糊，等待高手解决，我也想学学
UID387318在线时间 小时积分3514帖子离线17232 天注册时间
金牌会员, 积分 3514, 距离下一级还需 1486 积分
根据你的需求再调整下
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&无标题文档&/title&
a{color:#}
.box{width:690height:400overflow:}
.box .metro{width:200height:100padding:10background:#000;color:#margin:0px 10px 10px 0;float:}
.box .metro .entry{width:200height:100}
.box .metro.red{background:#f00;}
function $(id){
return document.getElementById(id)
function open(id,id2){
$(id).style.display='block';
$(id2).querySelector('div').style.height='200px';
function close(id,id2){
$(id).style.display='none';
$(id2).querySelector('div').style.height='100px';
&div class=&box&&
&div class=&metro&&1&/div&
&div class=&metro red& id=&two&&
&div style=&position:background:&&
&a href=&javascript:open('hiddenbox','two');&&展开&/a&
&a href=&javascript:close('hiddenbox','two');&&关闭&/a&
&div id=&hiddenbox& style=&display:&&fasdfadsfdasfdasfadsfadsfafd&/div&
&div class=&metro&&3&/div&
&div class=&metro&&4&/div&
&div class=&metro&&5&/div&
&div class=&metro&&6&/div&
&提示：您可以先修改部分代码再运行
UID392892在线时间 小时积分604帖子离线17232 天注册时间
高级会员, 积分 604, 距离下一级还需 396 积分
3#的展开后5#没有下移 是否可以把直接分3快然后固定默认大小不设高度 展开后就自动向下了 设置下2个DIV之间的padding
UID336600在线时间 小时积分167帖子离线17232 天注册时间
初级会员, 积分 167, 距离下一级还需 33 积分
用margin可以做到
红色的添加 CSS position:
点击展开&&红色的添加CSS margin-bottom:-100&&，5号添加CSS margin-top:100
点击关闭后 取消添加的CSS
UID498562在线时间 小时积分89帖子离线17232 天注册时间
初级会员, 积分 89, 距离下一级还需 111 积分
本帖最后由 laozuo957 于
14:47 编辑
看需要不需要改结构了
& &&&1.如果能改结构 把1 和 4 放在一个盒子里，2和5放在一个盒子里，3和6放在一个盒子里。不固定外面盒子的高度，盒子里面的 2 高度增加的时候，5自然被挤下去了。
& &&&2.如果不能改结构。如果能够提前知道点击2 红色盒子的时候，所展开的高度，然后根据这个高度来对 5（盒子） 来进行调节，需要使用定位。就如楼上提到的。
UID498562在线时间 小时积分89帖子离线17232 天注册时间
初级会员, 积分 89, 距离下一级还需 111 积分
本帖最后由 laozuo957 于
14:52 编辑
我不会贴代码……
UID498562在线时间 小时积分89帖子离线17232 天注册时间
初级会员, 积分 89, 距离下一级还需 111 积分
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&无标题文档&/title&
a{color:#}
.box{width:690height:400overflow:}
.box .metro{width:200height:100padding:10background:#000;color:#margin:0px 10px 10px 0;}
.box .metro .entry{width:200height:100}
.box .metro.red{background:#f00;}
.fl {float:}
function $(id){
&&return document.getElementById(id)
function open(id,id2){
&&$(id).style.display='block';
&&$(id2).style.height='200px';
function close(id,id2){
&&$(id).style.display='none';
&&$(id2).style.height='100px';
&div class=&box&&
& & & & &p&改变结构后的方法~&/p&
& & & & &div class=&fl&&
& & & & & & & &&&&div class=&metro&&1&/div&
& & & & & & & &&&&div class=&metro&&4&/div&
& & & & &/div&
& & &div class=&fl&&
& & & & & & & & &div class=&metro red& id=&two&&
& & & & & & & && & &a href=&javascriptpen('hiddenbox','two');&&展开&/a&
& & & & & & & && & &a href=&javascript:close('hiddenbox','two');&&关闭&/a&
& & & & & & & && & &div id=&hiddenbox& style=&display:&&fasdfadsfdasfdasfadsfadsfafd&/div&
& & & & & & & & &/div&
& & & & & & & & &div class=&metro&&5&/div&
& & & & &/div&
& & & & &div class=&fl&&
& & & & & & & & &div class=&metro&&3&/div&& &
& & & & & & & & &div class=&metro&&6&/div&
& & & & &/div&
UID335823在线时间 小时积分3763帖子离线17232 天注册时间
金牌会员, 积分 3763, 距离下一级还需 1237 积分
其实原帖里我提到了我知道把HTML结构换成三列浮动的形式，可以很轻松实现。可以处于实际需求，像以下代码这种结构，如何实现上述的效果。，就如楼上的做法。
不过难度就在于不能用这种结构。
换个思路，不知道有没有什么JQUERY之类的，可以去实现，其实我感觉当它撑开后，方块5被挤下去，其他DIV保持不变，这种貌似有些类似瀑布流的原理。
UID347463在线时间 小时积分1059帖子离线17232 天注册时间
银牌会员, 积分 1059, 距离下一级还需 1941 积分
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&link rel=&stylesheet& type=&text/css& href=&/css/cuctv.css& /&
&script type=&text/javascript& src=&/js/jquery-1.4.2.min.js&&&/script&
&title&无标题文档&/title&
a{color:#}
.box{width:690height:400overflow:}
.box .metro{width:200height:100padding:10background:#000;color:#margin:0px 10px 10px 0;float:}
.box .metro .entry{width:200height:100}
.box .metro.red{background:#f00; position:relative}
#hiddenbox{ height:200px}
$(function(){
$(&#two .btn&).toggle(function(){
$(this).text(&关闭&);
$(&#hiddenbox&).fadeIn();
},function(){
$(this).text(&展开&);
$(&#hiddenbox&).fadeOut();
&div class=&box&&
&div class=&metro&&1&/div&
&div class=&metro red& id=&two&&
&div style=&position:background:&&
&span class=&btn&&展开&/span&
&div id=&hiddenbox& style=&display:&&fasdfadsfdasfdasfadsfadsfafd&/div&
&div class=&metro&&3&/div&
&div class=&metro&&4&/div&
&div class=&metro&&5&/div&
&div class=&metro&&6&/div&
&提示：您可以先修改部分代码再运行
UID335823在线时间 小时积分3763帖子离线17232 天注册时间
金牌会员, 积分 3763, 距离下一级还需 1237 积分
yaoyaoqi 发表于
楼上，最主要是点击展开后，红色下面的那块要顺势往下移动
UID584678在线时间 小时积分2295帖子离线17232 天注册时间
银牌会员, 积分 2295, 距离下一级还需 705 积分
BadJohnny 发表于
楼上，最主要是点击展开后，红色下面的那块要顺势往下移动
绝对定位即可
UID336600在线时间 小时积分167帖子离线17232 天注册时间
初级会员, 积分 167, 距离下一级还需 33 积分
本帖最后由 yylt 于
17:26 编辑
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&script src=&/ajax/libs/jquery/1.7.2/jquery.min.js& type=&text/javascript&&&/script&
&title&无标题文档&/title&
height:400
.box .metro {
height:100
padding:10
background:#000;
margin:0px 10px 10px 0;
.box .metro .entry {
height:100
.box .metro.red {
background:#f00;
&div class=&box&&
&div class=&metro&&1&/div&
&div class=&metro red& id=&two&& &a
class=&openButton&&展开&/a& &a
class=&closeButton&&关闭&/a&
&div id=&hiddenbox& style=&display:&&fasdfadsfdasfdasfadsfadsfafd&/div&
&div class=&metro&&3&/div&
&div class=&metro&&4&/div&
&div class=&metro&&5&/div&
&div class=&metro&&6&/div&
$(&.openButton&).click(function(){
$(&#two&).height(&200px&).css(&margin-bottom&,&-100px&);
$(&.metro:eq(4)&).css(&margin-top&,&100px&);
$(&.closeButton&).click(function(){
$(&#two&).height(&100px&).css(&margin-bottom&,&0px&);
$(&.metro:eq(4)&).css(&margin-top&,&0px&);
&提示：您可以先修改部分代码再运行
不会Javascrpt&&刚刚接触Jquery ，提供个简单的方案
思路如我5楼说的那样
补充内容 ( 17:28):
用Javascrpt 应该很容易实现 其实就是增加和删去 CSS
补充内容 ( 17:31):
不改任何结构
UID335823在线时间 小时积分3763帖子离线17232 天注册时间
金牌会员, 积分 3763, 距离下一级还需 1237 积分
本帖最后由 BadJohnny 于
17:57 编辑
13楼这个不错！
我改变了一下行为，改成鼠标滑出和滑入了。
再多问一种假设，
如果这种方块是循环输出的，数量不一定，怎么样可以不用把这段JS放到循环当中，也能让每个方块各自都能有这个效果呢？
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&script src=&/ajax/libs/jquery/1.7.2/jquery.min.js& type=&text/javascript&&&/script&
&title&无标题文档&/title&
height:400
.box .metro {
height:100
padding:10
background:#000;
margin:0px 10px 10px 0;
.box .metro .entry {
height:100
.box .metro.red {
background:#f00;
&div class=&box&&
&div class=&metro&&1&/div&
&div class=&metro red&&2&/div&
&div class=&metro&&3&/div&
&div class=&metro&&4&/div&
&div class=&metro&&5&/div&
&div class=&metro&&6&/div&
$(&.red&).mouseover(function(){
$(this).height(&200px&).css(&margin-bottom&,&-100px&);
$(&.metro:eq(4)&).css(&margin-top&,&100px&);
$(&.red&).mouseout(function(){
$(this).height(&100px&).css(&margin-bottom&,&0px&);
$(&.metro:eq(4)&).css(&margin-top&,&0px&);
&提示：您可以先修改部分代码再运行
UID336600在线时间 小时积分167帖子离线17232 天注册时间
初级会员, 积分 167, 距离下一级还需 33 积分
BadJohnny 发表于
<font color="#楼这个不错！
我改变了一下行为，改成鼠标滑出和滑入了。
再多问一种假设，
只要有了方法，其实循环也是很好解决的。根据宽度计算出每行有多少个div，然后控制同一列内容即可
UID336600在线时间 小时积分167帖子离线17232 天注册时间
初级会员, 积分 167, 距离下一级还需 33 积分
加个动画玩玩
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&script src=&/ajax/libs/jquery/1.7.2/jquery.min.js& type=&text/javascript&&&/script&
&title&无标题文档&/title&
height:400
.box .metro {
height:100
padding:10
background:#000;
margin:0px 10px 10px 0;
.box .metro .entry {
height:100
.box .metro.red {
background:#f00;
&div class=&box&&
&div class=&metro&&1&/div&
&div class=&metro red& id=&two&& &a
class=&openButton&&展开&/a& &a
class=&closeButton&&关闭&/a&
&div id=&hiddenbox& style=&display:&&fasdfadsfdasfdasfadsfadsfafd&/div&
&div class=&metro&&3&/div&
&div class=&metro&&4&/div&
&div class=&metro&&5&/div&
&div class=&metro&&6&/div&
$(document).ready(function(e) {
$(&.openButton&).click(function(){
$(&#two&).animate({height:&200px& , marginBottom: &-100px&}, 1000);
$(&.metro:eq(4)&).animate({marginTop:&100px&} , 150);
//打开动画
$(&.closeButton&).click(function(){
$(&#two&).animate({height:&100px& , marginBottom: &0px& }, 150);
$(&.metro:eq(4)&).animate({marginTop:&0px&} , 1000);
&提示：您可以先修改部分代码再运行
UID335823在线时间 小时积分3763帖子离线17232 天注册时间
金牌会员, 积分 3763, 距离下一级还需 1237 积分
好像我按照现在这些代码以此类推的去添加到其他方块上，还是会出现些问题的
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&script src=&/ajax/libs/jquery/1.7.2/jquery.min.js& type=&text/javascript&&&/script&
&title&无标题文档&/title&
height:400
.box .metro {
height:100
background:#000;
margin:0px 10px 10px 0;
.box .metro .entry {
height:100
.box .metro.red {
background:#f00;
.box .metro .small{
height:100
margin-right:10
background:#900;
.box .metro .small.last{
margin-right:0;
&div class=&box&&
&div class=&metro one&&1&/div&
&div class=&metro two&&2&/div&
&div class=&metro three&&3&/div&
&div class=&metro four&&4&/div&
&div class=&metro&&
&div class=&small&&5&/div&
&div class=&small last&&&/div&
&div class=&metro&&6&/div&
&div class=&metro sev&&7&/div&
&div class=&metro ei&&
&div class=&small&&8&/div&
&div class=&small last&&&/div&
&div class=&metro nine&&9&/div&
$(&.one&).mouseover(function(){
$(this).height(&200px&).css(&margin-bottom&,&-100px&);
$(&.metro:eq(3)&).css(&margin-top&,&100px&);
$(&.one&).mouseout(function(){
$(this).height(&100px&).css(&margin-bottom&,&0px&);
$(&.metro:eq(3)&).css(&margin-top&,&0px&);
$(&.two&).mouseover(function(){
$(this).height(&200px&).css(&margin-bottom&,&-100px&);
$(&.metro:eq(4)&).css(&margin-top&,&100px&);
$(&.two&).mouseout(function(){
$(this).height(&100px&).css(&margin-bottom&,&0px&);
$(&.metro:eq(4)&).css(&margin-top&,&0px&);
$(&.three&).mouseover(function(){
$(this).height(&200px&).css(&margin-bottom&,&-100px&);
$(&.metro:eq(5)&).css(&margin-top&,&100px&);
$(&.three&).mouseout(function(){
$(this).height(&100px&).css(&margin-bottom&,&0px&);
$(&.metro:eq(5)&).css(&margin-top&,&0px&);
$(&.fore&).mouseover(function(){
$(this).height(&200px&).css(&margin-bottom&,&-100px&);
$(&.metro:eq(6)&).css(&margin-top&,&100px&);
$(&.four&).mouseout(function(){
$(this).height(&100px&).css(&margin-bottom&,&0px&);
$(&.metro:eq(6)&).css(&margin-top&,&0px&);
&提示：您可以先修改部分代码再运行
UID619410在线时间 小时积分20帖子离线17232 天注册时间
新手上路, 积分 20, 距离下一级还需 30 积分
不错！看看了
UID619410在线时间 小时积分20帖子离线17232 天注册时间
新手上路, 积分 20, 距离下一级还需 30 积分
www.cetour.net不错
UID589978在线时间 小时积分243帖子离线17232 天注册时间
中级会员, 积分 243, 距离下一级还需 257 积分
感谢你的分享
Powered by查看: 5702|回复: 10
margin-bottom:0px为什么不起作用？
米农, 积分 227, 距离下一级还需 9773 积分
米农, 积分 227, 距离下一级还需 9773 积分
城市币17 元
在线时间21 小时
阅读权限20
主题帖子城市币
请教各位高人：
我已经在.css文件里设成：margin-bottom:0 希望网站底部文字和浏览器底部靠近，但是不知道为什么还是不起作用。
当文字少的时候，网站底部文字还是和浏览器底部有很大间隙，仍是和上部靠拢而不是和下部。不知道什么原因？应该怎么办？
&div id=&footer& &
& & & & & & & & &div id=&footer_ICP&&&/div&
& & & & & & & & &div id=&footer_copyright&&
& && &&&& & & &&&&&
& && && && &bbbbb &nnnnn &&
& & & & & & & & &/div&
& & & & &/div&
style.css文件
& && &&&& & & &
& && &&&margin-bottom:0
& & & & padding:0
& & & & width:1002
& & & & height:20
& & & & border-bottom:1px solid #E6E6E6;
& & & & background:#F3F4F6 url(../Images/bg_copyright.gif) 251px 10px no-
& & & & color:#999999;
& & & & text-align:
& & & & line-height:150%;
#footer a{
& & & & color:#FFFFFF;
#footer_ICP {
& & & & float:
& & & & padding-top:8
& & & & width:252
& & & & height:10
& & & & text-align:
& & & & line-height:150%;
#footer_copyright {
& & & & float:
& & & & padding:10px 20px 10px 40
& & & & width:690
& & & & height:20
& & & & text-align:
& & & & line-height:150%;
富商, 积分 38282, 距离下一级还需 11718 积分
富商, 积分 38282, 距离下一级还需 11718 积分
城市币2492 元
在线时间3579 小时
阅读权限100
主题帖子城市币
html,body{margin:0;padding:0}
米农, 积分 227, 距离下一级还需 9773 积分
米农, 积分 227, 距离下一级还需 9773 积分
城市币17 元
在线时间21 小时
阅读权限20
主题帖子城市币
还是不行啊
还是不行啊！加后代码如下。
& & & & background:#FFFFFF;
html,body{margin:0;padding:0}
& & & & margin:0
& & & & width:1002
& & & & font-size:12
& & & & background:url(../Images/bg_body.png) 0px 100%px repeat-x;
& & & & color:#0033FF;
& & & & font-family:Tahoma, Verdana, Arial, Helvetica, sans-
米农, 积分 227, 距离下一级还需 9773 积分
米农, 积分 227, 距离下一级还需 9773 积分
城市币17 元
在线时间21 小时
阅读权限20
主题帖子城市币
米商, 积分 26275, 距离下一级还需 3725 积分
米商, 积分 26275, 距离下一级还需 3725 积分
城市币85 元
在线时间2620 小时
阅读权限50
主题帖子城市币
不要直接定义body的width
建议body里装个大盒子
比如
&body&
&div id=&box&&
& & &div id=&header&&&/div&
& & &div id=&content&&&/div&
& & &div id=&footer&&&/div&
&/div&
&/body&
复制代码
然后在css里简单点的可以这样
*{margin:0;padding:0}
body{}
#box{width:960 margin:0 auto}
复制代码
你也不需要在设置footer的margin-bottom:0
[ 本帖最后由 cngoogle 于
09:35 编辑 ]
米农, 积分 227, 距离下一级还需 9773 积分
米农, 积分 227, 距离下一级还需 9773 积分
城市币17 元
在线时间21 小时
阅读权限20
主题帖子城市币
还是不行啊
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&meta name=©right& content=&hhhhhh& /&
&meta name=&Author& content=&hhhhhh& /&
&meta name=&Keywords& content=&hhhhhhh& /&
&meta name=&Description& content=&hhhhhhhh& /&
&title&hhhhhhh&/title&
&script language=&javascript& src=&../Script/Html.js&&&/script&
&link href=&Css/Style.css& rel=&stylesheet& type=&text/css&&
&style type=&text/css&&
.STYLE1 {color: #FFFFFF}
& & & & &div id=&header& &
& & & & & & & & &div class=&header_logo& &&img src=&Images/head_logo.gif& width=&32&
height=&24& /&&/div&
& & & & & & & & &div class=&header_link&&
& & & & & & & & & & & &&&&/div&
& & & & & & & & &div id=&mainMenu&&&ul&&li id=&mainMenu1&&&a&&href=&main.asp& &hhhh
&/a&&/li&&li id=&mainMenu2&&&a&&href=&About.asp& &hhhhh&/a&&ul
onMouseOver=&document.getElementById('mainMenu2').style.backgroundImage='url()'&
onMouseOut=&document.getElementById('mainMenu2').style.backgroundImage='url()'&&&li&&a
href=&about.asp&&hhhhhh&/a&&/li&&li&&a href=&about1.asp&&hhhhh&/a&&/li&&li&&a
href=&About2.asp&&hhhhh&/a&&/li&&li&&a href=&About3.asp&&hhhhhh
&/a&&/li&&/ul&&/li&&li id=&mainMenu4&&&a&&href=&NewsList.asp& &hhhhhh&/a&&ul
onMouseOver=&document.getElementById('mainMenu4').style.backgroundImage='url()'&
onMouseOut=&document.getElementById('mainMenu4').style.backgroundImage='url()'&&&li&&a
href=&NewsList.asp&&hhhhh&/a&&/li&&li&&a href=&NewsList.asp&&hhhhh&/a&&/li&&li&&a
href=&NewsList.asp&&hhhhh&/a&&/li&&li&&a href=&NewsList.asp&&hhhhh
&/a&&/li&&/ul&&/li&&li id=&mainMenu3&&&a&&href=&ProductList.asp& &hhhhhh&/a&&ul
onMouseOver=&document.getElementById('mainMenu2').style.backgroundImage='url()'&
onMouseOut=&document.getElementById('mainMenu2').style.backgroundImage='url()'&&&li&&a
href=&ProductView1.asp&&hhhhhh&/a&&/li&&li&&a href=&ProductView2.asp&&hhhh&/a&&/li&&li&&a href=&ProductList.asp?SortID=48&&hhhhh
&/a&&/li&&/li&&/ul&&/li&&li id=&mainMenu5&&&a&&href=&JobsList.asp& &hhhhhhh&/a&&/li&&li
id=&mainMenu6&&&a&&href=&../wssc/Index.asp& target=&_blank&&hhhh&/a&&ul
onMouseOver=&document.getElementById('mainMenu4').style.backgroundImage='url()'&
onMouseOut=&document.getElementById('mainMenu4').style.backgroundImage='url()'&&&li&&a
href=&../wssc/Index.asp& target=&_blank&&hhhh    hhhh&/a&&/ul&&/li&&li
id=&mainMenu7&&&a&&href=&../bbs/Index.asp&&&target=&_blank& &hhhhh&/a&&ul
onMouseOver=&document.getElementById('mainMenu4').style.backgroundImage='url()'&
onMouseOut=&document.getElementById('mainMenu4').style.backgroundImage='url()'&&&li&&a
href=&../bbs/Index.asp&&&target=&_blank&&hhhh     hhhh&/a&&/ul&&/div&
& & & & & & & & &div class=&header_checkmember&&&/div&
& & & & & & & & &div class=&header_banner&&&div align=¢er&&
&div id=&topcen&&&/div&
& & & & &/div&
& & & & &div id=&bodyer_page&&
& & & & & & & & &div id=&mainSidebar&&
& && &&&& & & & &div class=&subject&&
& && &&&& & & & & & & & &div class=&subject_name&&&img
src=&Images/subject_menu.gif&/&&/div&
& && &&&& & & & & & & & &div class=&pageMenu&&&img
src=&Images/arrow_05.gif&&&&&a href=&JobsList.asp&&hhhhh
&/a&&br/&&&&/div&&/div&
& && &&&& & & & &div class=&subject&&
& && &&&& & & & & & & & &div class=&subject_name&&&img
src=&Images/subject_menu.gif&/&&/div&
& && &&&& & & & & & & & &div class=&search&&&/div&
& && && && &&/div&
& & & & & & & & &/div&
& & & & & & & & &div id=&pageBody&&
& && & & & & & & & & & &div class=&pageLocation&&&a href=&../index.asp&&hhhh&/a&&img
src=&Images/arrow_07.gif& /&&a href=&jobslist.asp&&hhhhh&/a&&/div&
& && & & & & & & & & & &div class=&pageContent&&&div class=&pageContent_list&&&table
width=&100%&& &tr&& &&td&&b&hhhhh&/b&&/td&& &&td&&b&hhhhh&/b&&/td&& &&td&&b&hhhhh&/b&&/td&& &&td width=&64&&&b&hhhh&/b&&/td&& &&td width=&46&&&b&状态&/b&&/td&& &
&td width=&60&&&b&更新时间&/b&&/td&&&&/tr& &tr&& &&td&&a href=&JobsView1.asp&&hhhhh
&/a&&/td&& &&td&hhhh&/td&& &&td&hhhh&/td&& &&td&1人&/td&& &&td&hhhh&/td&& &
&td&&/td&&&&/tr&
&tr&& &&td&&a href=&JobsView2.asp&&hhhh&/a&&/td&& &&td&hhhhh&/td&& &&td&hhh&/td&
&&&td&1人&/td&& &&td&hhhhh&/td&& & &td&&/td&&&&/tr&
&/table&&/div&&div class=&pageContent_end&&
|&共计：&font color=&#ff6600&&2&/font&条记录&&页次：&font
color=&#ff6600&&1&/font&&/strong&/1&&每页：&font color=&#ff6600&&20&/font&条
&&font color=&#ff6600&&1&/font&&&/div&
& && &&&&/div&
& & & & &/div&
& & & & &div id=&footer& &
& & & & & & & & &div id=&footer_ICP&&&/div&
& & & & & & & & &div id=&footer_copyright&&
& && &&&& & & &&+86-088
888888 &&&&
& && && && &(C) 2000&hhhhh &&
& & & & & & & & &/div&
& & & & &/div&
.css文件部分
/*------------------------全局--------------------*/
& & & & background:#FFFFFF;
& & & & margin:0
& & & & width:1002
& & & & font-size:12
& & & & background:url(../Images/bg_body.png) 0px 100%px repeat-x;
& & & & color:#0033FF;
& & & & font-family:Tahoma, Verdana, Arial, Helvetica, sans-
img,form,ul,p{
& & & & margin:0
& & & & padding:0
& & & & border:0
input,textarea,select {
& & & & color:#666666;
& & & & font-size:12
& & & & font-family:Tahoma, Verdana, Arial, Helvetica, sans-
& & & & color:#666666;
& & & & text-decoration:
& & & & color:#FF3300;
/*------------------------------------------------*/
/*通用_页面容器------------------------------------*/
#container{
/*通用_页面头部--------------------------*/
& & & & margin:
& & & & padding-top:15
& & & & width:1002
& & & & height:319
& & & & background:url(../Images/head_bg.jpg) no-
.header_logo{
& & & & float:
& & & & padding:0 0 15px 16
& & & & width:200
& & & & height:56
/*小字链接*/
.header_link{
& & & & float:
& & & & padding:0px 46px 15px 0
& & & & width:740
& & & & height:42
& & & & text-align:
/*主菜单，有下拉*/
#mainMenu{
& & & & float:
& & & & padding-left:26
& & & & list-style-type:
#mainMenu ul li{
& & & & float:
& & & & margin-right:2
& & & & list-style:
#mainMenu ul li a{
& & & & display:
& & & & padding-top:12
& & & & width:70
& & & & height:20
& & & & text-align:
& & & & color:#FFFFFF;
#mainMenu ul li a:hover{
#mainMenu ul li ul {
& & & & list-style-type:
& & & & text-align:
& & & & left:-999
& & & & width:80
& & & & position:
#mainMenu ul li ul li{
& & & & float:
& & & & width:142
& & & & height:24
& & & & border-top:1px solid #FFFFFF;
& & & & background:#5AC05A;
#mainMenu ul li ul li a{
& & & & display:
& & & & padding:6px 6px 6px 6
& & & & width:130
& & & & height:12
& & & & text-align:
#mainMenu ul li ul li a:hover{
& & & & background: #78C178;
#mainMenu ul li:hover ul{
& & & & left:
#mainMenu ul li.sfhover ul{
& & & & left:
/*检查会员是否登录*/
.header_checkmember{
& & & & float:
& & & & padding:9px 0px 0px 0
& & & & width:196
& & & & height:12
& & & & color:#FFFFFF;
.header_checkmember a{
& & & & color:#333333;
& & & & text-decoration:
.header_checkmember a:hover{
& & & & color:#E00000;
/*大幅广告条*/
.header_banner{
& & & & float:
& & & & padding:1px 0
& & & & width:1002
& & & & height:228
/*通用_页面底部--------------------------*/
& & & & padding:0
& & & & width:1002
& & & & height:20
& & & & border-bottom:1px solid #E6E6E6;
& & & & background:#F3F4F6 url(../Images/bg_copyright.gif) 251px 10px no-
& & & & color:#999999;
& & & & text-align:
& & & & line-height:150%;
#footer a{
& & & & color:#FFFFFF;
#footer_ICP {
& & & & float:
& & & & padding-top:8
& & & & width:252
& & & & height:10
& & & & text-align:
& & & & line-height:150%;
#footer_copyright {
& & & & float:
& & & & padding:10px 20px 10px 40
& & & & width:690
& & & & height:20
& & & & text-align:
& & & & line-height:150%;
/*通用_页面主体--------------------------*/
/*首页内页相同*/
/*首页内页不同之首页*/
#bodyer_index{
& & & & overflow:
& & & & margin:15
& & & & width:1002
& & & & background:url(../Images/bg_bodyer_index.gif) 251px 334px repeat-y;
/*首页内页不同之内页*/
#bodyer_page{
& & & & overflow:
& & & & margin:15
& & & & width:1002
& & & & background:url(../Images/bg_bodyer_page.gif) 251px 0px repeat-y;
/*第一边栏*/
#mainSidebar{
& & & & float:
& & & & padding:3px 17
& & & & width:218
/*第二边栏*/
#subSidebar{
& & & & float:
& & & & padding:3px 17
& & & & width:160
/*边栏以外的主体区域，即核心内容区，首页内页相同*/
#indexpageBody{
米商, 积分 26275, 距离下一级还需 3725 积分
米商, 积分 26275, 距离下一级还需 3725 积分
城市币85 元
在线时间2620 小时
阅读权限50
主题帖子城市币
终于明白LZ的意思了
你的网页本身没错，你的想法也没错，但你所认为的错了
底部和浏览器有那么大的空挡是自然的，因为底部本身就是网页的内容
网页的内容是从上而下慢慢堆叠的，你上面没有足够的内容使底部往下撑，底部当然和浏览器有空挡了
这个空挡不是margin-bottom
米农, 积分 227, 距离下一级还需 9773 积分
米农, 积分 227, 距离下一级还需 9773 积分
城市币17 元
在线时间21 小时
阅读权限20
主题帖子城市币
难道说。就只能插一块白板图了？
米商, 积分 26275, 距离下一级还需 3725 积分
米商, 积分 26275, 距离下一级还需 3725 积分
城市币85 元
在线时间2620 小时
阅读权限50
主题帖子城市币
正常来说是这样的
你可以写死中间内容区域的高度，这样底部就下来了
你也可以去网上找一下一些javascript的控制代码，可以使底部一直悬浮于浏览器底部的
最好还是自然一些好了
米农, 积分 227, 距离下一级还需 9773 积分
米农, 积分 227, 距离下一级还需 9773 积分
城市币17 元
在线时间21 小时
阅读权限20
主题帖子城市币
哦，多谢高手
哦，多谢高手！
旗下品牌 -
&&论坛管理员邮箱：}
我要回帖
更多推荐
- ·微信语音合并成mp3收听的语音在哪里查看？
- ·微信收听里面的信息会被怎么能听到对方和别人的聊天内容看到吗？
- ·群发短信的软件邮件的软件邮件群发短信的软件软件哪个好
- ·百度的百度百科百度上的资料可信吗真实高不
- ·怎么创建百度发帖怎么发百科词条
- ·我是城阳十中学生家长，山东省青岛市城阳区城阳一中直升生名额14名，城阳二中直升生名额14名
- ·不锈钢力学性能能包括什么？
- ·百度团购导航主页面下的导航
- ·如图：联想T60的屏幕突然出现一道黑条，开机打开网络连接慢一段时间，慢慢变淡，室内空调打开一段时间，黑条甚至会消失
- ·为什么win7不能装xp我的WIN7装不了YY语音
- ·为什么电脑不能删除提示文件？提示I/O错误
- ·如何扩大电脑本地internet缓存（internetwin7 临时文件件）的空间大小？
- ·为什么360安全浏览器首页 广告过滤 选择不拦截本站广告后 该网站的其他链接就打不开了跳出一个空白页面
- ·打印机为何总是脱机打印总是不成功啊，急急急，求救各位专家了。
- ·这时htc手机什么型号好号
- ·请问哪位朋友是跨国采购网GLOBchemical importerR的VIP会员，能否帮我查一个客户信息。在此非常感谢！:)
- ·如何将float型数据php 写入txt.txt
- ·笔记本自带系统盘HP电脑不能读系统盘
- ·为什么插了没有网线怎么上网能正常上网 但是右下角图标有XX标志
- ·discuz教程 怎么让div里的div置顶，有白边，用了margin:0;没什么效果。
- ·桌面图标删除不掉了
- ·cadcad字体怎么安装问题
- ·PS中，ps怎么改变物体颜色让输入的文字，真是得贴附在图片里的物体上，如图：
- ·关于电脑ip地址设置的问题
- ·惠普笔记本散热问题电脑散热时噪音很大吗？为什么我的这台噪音这么大？
- ·自带的IE浏览器和360安全浏览器学堂都不能用。
- ·门窗算料软件设计中如何快速算料，软件的话用什么软件
- ·htcg16怎么样网络设置没问题 但更新天气一直失败 显示 下载天气信息时连接中断.是否重新下载
- ·怎样给压缩怎样让文件夹加密密
- ·帮我看看鞋标怎么看耐克鞋的真假假
- ·20122月27日NBA2012全明星扣篮大赛赛直播 NBA2012全明星扣篮大赛赛2012电视直播东部明星VS西部明星 NBA2012全明星扣篮大赛赛2012高清直播地址
- ·求太极拳伴奏音乐加长版《正月梅花花神曲mp3》《草原之夜》MP3格式音乐文件 谢谢，邮箱：
- ·哪位好心人把郑多燕 高清 qvod健身舞中文全集发给我啊？最好是高清的我超级需要的！感激不尽。。。
- ·2月27日【西部明星vs东部明星】NBA全明星赛2012直播东部明星vs西部明星直播【东部明星vs西部明星】_在线直播
