HTML DIV百分比宽度奇奇怪怪的间距产生了？

a596643025 2014-07-16 01:04:00
最近做站的时候要做个用户卡，顺着自己做的DEMO做，本来DEMO好好的结果放到测试站点里面变成这样...
DEMO运行的时候好好的啊，下面这图不是DEMO本体，是直接从站点上面扒下来的HTML代码然后在源文件里面加上CSS的效果
说白了是个Discuz论坛拉，但是为何会出现这种莫名其妙的间距问题，我去百度了很多也没找到。好像是显示模式引发的，但是在DEMO里面用同样的显示模式一点问题也没有。我之所以这样讲是因为当display模式设置成flex以后就没有了这些间距。
源码文件的话我发一下，用以替换discuz论坛里面的header_userstatus.htm还有header.htm在回复里面发吧，长度过了。

<!--{if $_G['uid']}-->

<div id="um">

	<div class="avt y" style="display:none;"><a href="home.php?mod=space&uid=$_G[uid]"><!--{avatar($_G[uid],small)}--></a></div>

	<div id="d_avt_menu">

		<div class="d_upt">

			<strong class="vwmy{if $_G['setting']['connect']['allow'] && $_G[member][conisbind]} qq{/if}"><a href="home.php?mod=space&uid=$_G[uid]" target="_blank" title="{lang visit_my_space}"class="showmenu" onmouseover="showMenu({'ctrlid':'myitem'});">{$_G[member][username]}</a></strong>

			<!--{if $_G['group']['allowinvisible']}-->

			<span id="loginstatus">

				<a id="loginstatusid" href="member.php?mod=switchstatus" title="{lang login_switch_invisible_mode}" onclick="ajaxget(this.href, 'loginstatus');return false;" class="xi2"></a>

			</span>

			<!--{/if}-->

			<div>

			<!--{hook/global_usernav_extra1}-->

			</div>

		</div>

		<div class="d_upm">

			<!--{hook/global_usernav_extra4}-->

			<div class="d_upmr d_upmr1">

				<!--{if $_G['uid']}-->

				<div><a href="home.php?mod=space&do=pm" id="pm_ntc" style="background-repeat: no-repeat; background-position: 0 50%;"><em class="prompt_news{if empty($_G[member][newpm])}_0{/if}"></em>{lang pm_center}</a></div>

				<div><a href="home.php?mod=follow&do=follower"><em class="prompt_follower{if empty($_G[member][newprompt_num][follower])}_0{/if}"></em><!--{lang notice_interactive_follower}-->{if $_G[member][newprompt_num][follower]}($_G[member][newprompt_num][follower]){/if}</a></div>

				<!--{if $_G[member][newprompt] && $_G[member][newprompt_num][follow]}-->

					<div><a href="home.php?mod=follow"><em class="prompt_concern"></em><!--{lang notice_interactive_follow}-->($_G[member][newprompt_num][follow])</a></div>

				<!--{/if}-->

				<!--{if $_G[member][newprompt]}-->

					<!--{loop $_G['member']['category_num'] $key $val}-->

						<div><a href="home.php?mod=space&do=notice&view=$key"><em class="notice_$key"></em><!--{echo lang('template', 'notice_'.$key)}-->(<span class="rq">$val</span>)</a></div>

					<!--{/loop}-->

				<!--{/if}-->

				<!--{if empty($_G['cookie']['ignore_notice'])}-->

					<div class="ignore_noticeli"><a href="javascript:;" onclick="setcookie('ignore_notice', 1);hideMenu('myprompt_menu')" title="{lang temporarily_to_remind}"><em class="ignore_notice"></em></a></div>

				<!--{/if}-->

				<!--{/if}-->

				<!--{if $_G['setting']['taskon'] && !empty($_G['cookie']['taskdoing_'.$_G['uid']])}--><div><a href="home.php?mod=task&item=doing" id="task_ntc" class="new">{lang task_doing}</a></div><!--{/if}-->

				<!--{if ($_G['group']['allowmanagearticle'] || $_G['group']['allowpostarticle'] || $_G['group']['allowdiy'] || getstatus($_G['member']['allowadmincp'], 4) || getstatus($_G['member']['allowadmincp'], 6) || getstatus($_G['member']['allowadmincp'], 2) || getstatus($_G['member']['allowadmincp'], 3))}-->

				<div><a href="portal.php?mod=portalcp"><!--{if $_G['setting']['portalstatus'] }-->{lang		portal_manage}<!--{else}-->{lang portal_block_manage}<!--{/if}--></a></div>

				<!--{/if}-->

				</div>

				<div class="d_upmr d_upmr2">

				<div><a href="javascript:;" id="myitem" class="showmenu" onmouseover="showMenu({'ctrlid':'myitem'});">{lang myitem}</a></div>

				<div><a href="home.php?mod=spacecp">{lang setup}</a></div>

					<!--{if $_G['uid'] && $_G['group']['radminid'] > 1}-->

				<div>

					<a href="forum.php?mod=modcp&fid=$_G[fid]" target="_blank">{lang forum_manager}</a>

				</div>

					<!--{/if}-->

					<!--{if $_G['uid'] && getstatus($_G['member']['allowadmincp'], 1)}-->

				<div>

					<a href="admin.php" target="_blank">{lang admincp}</a>

				</div>

				<!--{/if}-->

			</div>

			<!--{hook/global_usernav_extra2}-->

	</div>

	<div class="d_upb">

		<!--{hook/global_usernav_extra3}-->

		<div><a href="home.php?mod=spacecp&ac=credit&showcredit=1" id="extcreditmenu"{if !$_G[setting][bbclosed]} onmouseover="delayShow(this, showCreditmenu);" class="showmenu"{/if}>{lang credits}: $_G[member][credits]</a></div>

		<div><a href="home.php?mod=spacecp&ac=usergroup" id="g_upmine" class="showmenu" onmouseover="delayShow(this, showUpgradeinfo)">{lang usergroup}: $_G[group][grouptitle]<!--{if $_G[member]['freeze']}--><span class="xi1">({lang freeze})</span><!--{/if}--></a></div>

		<div><a href="member.php?mod=logging&action=logout&formhash={FORMHASH}">{lang logout}</a></div>

	</div>



</div>

<!--{elseif !empty($_G['cookie']['loginuser'])}-->

<p>

	<strong><a id="loginuser" class="noborder"><!--{echo dhtmlspecialchars($_G['cookie']['loginuser'])}--></a></strong>

	<a href="member.php?mod=logging&action=login" onclick="showWindow('login', this.href)">{lang activation}</a>

	<a href="member.php?mod=logging&action=logout&formhash={FORMHASH}">{lang logout}</a>

</p>

<!--{elseif !$_G[connectguest]}-->

<!--{template member/login_simple}-->

<!--{else}-->

<div id="um">

	<div class="avt y"><!--{avatar(0,small)}--></div>

	<p>

		<strong class="vwmy qq">{$_G[member][username]}</strong>

		<!--{hook/global_usernav_extra1}-->

		<span class="pipe">|</span><a href="member.php?mod=logging&action=logout&formhash={FORMHASH}">{lang logout}</a>

	</p>

	<p>

		<a href="home.php?mod=spacecp&ac=credit&showcredit=1">{lang credits}: 0</a>

		<span class="pipe">|</span>{lang usergroup}: $_G[group][grouptitle]

	</p>

</div>

<!--{/if}-->

<!--{if $_G['uid']}-->

	<script language=javascript>

		var panelstat = 0;

		var panelheight;

		var panelo;

		var davt;

		jQ(window).load(	

			function() {

				davt = document.getElementById('d_avt');

				panelo = document.getElementById('d_avt_menu');

				panelo.style.top=davt.offsetTop+davt.offsetHeight+"px";

				panelo.style.left=davt.offsetLeft+davt.offsetWidth-panelo.offsetWidth+"px";

				panelo.style.display='block';

				panelheight=document.getElementById('d_avt_menu').offsetHeight;

				panelo.style.height="0px"

				panelo.style.transition="all 0.2s linear";

			}

		)

		function changepanel()

		{

			if(panelstat==1){

				panelo.style.height="0px";

				panelo.style.boxShadow="0 0 0px rgba(0,0,0,0.3)"

				panelstat=0;

			}else{

				panelo.style.left=davt.offsetLeft+davt.offsetWidth-panelo.offsetWidth+"px";

				panelo.style.top=davt.offsetTop+davt.offsetHeight+"px";

				panelo.style.height=panelheight+"px";

				panelo.style.boxShadow="0 0 10px rgba(0,0,0,0.3)"

				panelstat=1;

			}

		}

	</script>

<!--{/if}-->



样式表的话把下面这些代码写到common.css里面，由于都是附加的样式所以可以直接写，随便写。
.d_upmr1 div {

    width: 25%;

}

.d_upmr div {

    display: inline-block;

    height: 50%;

    line-height: 60px;

    text-align: center;

}

.d_upmr2 div {

    width: 33.3%;

}

.d_upmr div a {

    text-decoration: none;

    color: white;

    text-shadow: 0 0 10px rgba(0,0,0,0.3);

    background-color: rgba(255,255,255,0.3);

    width: 100%;

    height: 100%;

    display: block;

    transition: 0.2s linear;

}

.d_upmr div a:hover {

    color: red;

    background-color: rgba(255,255,255,0.8);

    box-shadow: 0 0 10px rgba(0,0,0,0.3);

}

a {transition:0.2s linear;transition-property:color,background-color;}

a:hover {text-decoration:none;color:red;}



.d_upt {background:rgba(255,255,255,0.5);text-align:center;height:60px;line-height:60px;}

.d_upt .pipe {color:transparent;}

.d_upm {border-top:1px solid #CDCDCD;}

.d_upm em {display: none;}

.d_upb {background:rgba(255,255,255,0.5);padding:0 10px;text-align:center;}

.d_upb a:hover {color:	red !important;}

.d_upb a {color:black !important;}



#d_avt {border: 2px solid rgba(255,255,255,0.3);font-size: 15px;float: right;width: 48px;height: 48px;text-align: center;line-height: 44px;background: #FFF;box-shadow: 0 0 10px rgba(0,0,0,0.2);cursor: pointer;}

#d_avt a {color:rgba(20,50,255,0.5);height:48px;line-height:48px;width:	48px;text-align:center;display:block;}

#d_avt a:hover {color:red;}

#d_avt_menu {background:rgba(255,255,255,0.3);width:300px;box-shadow:0 0 10px rgba(0,0,0,0.3);overflow:hidden;left:auto;top:0px;position:fixed;display:none;}

感谢各位大大赏脸一读，如果能有大神来帮忙解决的话更好，这个问题实在太奇怪了我从来都没见过,不得已才来这里求助，第一次来这里如果有触犯什么规则或者什么不好的东西的话还请见谅！我会修改的！
...全文
313 1 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
a596643025 2014-07-16
  • 打赏
  • 举报
 回复 
<!--{subtemplate common/header_common}-->
	<meta name="application-name" content="$_G['setting']['bbname']" />
	<meta name="msapplication-tooltip" content="$_G['setting']['bbname']" />
	<!--{if $_G['setting']['portalstatus']}--><meta name="msapplication-task" content="name=$_G['setting']['navs'][1]['navname'];action-uri={echo !empty($_G['setting']['domain']['app']['portal']) ? 'http://'.$_G['setting']['domain']['app']['portal'] : $_G[siteurl].'portal.php'};icon-uri={$_G[siteurl]}{IMGDIR}/portal.ico" /><!--{/if}-->
	<meta name="msapplication-task" content="name=$_G['setting']['navs'][2]['navname'];action-uri={echo !empty($_G['setting']['domain']['app']['forum']) ? 'http://'.$_G['setting']['domain']['app']['forum'] : $_G[siteurl].'forum.php'};icon-uri={$_G[siteurl]}{IMGDIR}/bbs.ico" />
	<!--{if $_G['setting']['groupstatus']}--><meta name="msapplication-task" content="name=$_G['setting']['navs'][3]['navname'];action-uri={echo !empty($_G['setting']['domain']['app']['group']) ? 'http://'.$_G['setting']['domain']['app']['group'] : $_G[siteurl].'group.php'};icon-uri={$_G[siteurl]}{IMGDIR}/group.ico" /><!--{/if}-->
	<!--{if helper_access::check_module('feed')}--><meta name="msapplication-task" content="name=$_G['setting']['navs'][4]['navname'];action-uri={echo !empty($_G['setting']['domain']['app']['home']) ? 'http://'.$_G['setting']['domain']['app']['home'] : $_G[siteurl].'home.php'};icon-uri={$_G[siteurl]}{IMGDIR}/home.ico" /><!--{/if}-->
	<!--{if $_G['basescript'] == 'forum' && $_G['setting']['archiver']}-->
		<link rel="archives" title="$_G['setting']['bbname']" href="{$_G[siteurl]}archiver/" />
	<!--{/if}-->
	<!--{if !empty($rsshead)}-->$rsshead<!--{/if}-->
	<!--{if widthauto()}-->
		<link rel="stylesheet" id="css_widthauto" type="text/css" href='{$_G['setting']['csspath']}{STYLEID}_widthauto.css?{VERHASH}' />
		<script type="text/javascript">HTMLNODE.className += ' widthauto'</script>
	<!--{/if}-->
	<!--{if $_G['basescript'] == 'forum' || $_G['basescript'] == 'group'}-->
		<script type="text/javascript" src="{$_G[setting][jspath]}forum.js?{VERHASH}"></script>
	<!--{elseif $_G['basescript'] == 'home' || $_G['basescript'] == 'userapp'}-->
		<script type="text/javascript" src="{$_G[setting][jspath]}home.js?{VERHASH}"></script>
	<!--{/if}-->
	<!--{if $_G['basescript'] != 'portal' || $_GET['diy'] == 'yes' && check_diy_perm($topic)}-->
		<script type="text/javascript" src="{$_G[setting][jspath]}portal.js?{VERHASH}"></script>
	<!--{/if}-->
	<!--{if $_GET['diy'] == 'yes' && check_diy_perm($topic)}-->
		<link rel="stylesheet" type="text/css" id="diy_common" href="{$_G['setting']['csspath']}{STYLEID}_css_diy.css?{VERHASH}" />
	<!--{/if}-->
</head>

<body id="nv_{$_G[basescript]}" class="pg_{CURMODULE}{if $_G['basescript'] === 'portal' && CURMODULE === 'list' && !empty($cat)} {$cat['bodycss']}{/if}" onkeydown="if(event.keyCode==27) return false;">
	<div id="append_parent"></div><div id="ajaxwaitid"></div>
	<!--{if $_GET['diy'] == 'yes' && check_diy_perm($topic)}-->
		<!--{template common/header_diy}-->
	<!--{/if}-->
	<!--{if check_diy_perm($topic)}-->
		<!--{template common/header_diynav}-->
	<!--{/if}-->
	<!--{if CURMODULE == 'topic' && $topic && empty($topic['useheader']) && check_diy_perm($topic)}-->
		$diynav
	<!--{/if}-->
	<!--{if empty($topic) || $topic['useheader']}-->
		<!--{if $_G['setting']['mobile']['allowmobile'] && (!$_G['setting']['cacheindexlife'] && !$_G['setting']['cachethreadon'] || $_G['uid']) && ($_GET['diy'] != 'yes' || !$_GET['inajax']) && ($_G['mobile'] != '' && $_G['cookie']['mobile'] == '' && $_GET['mobile'] != 'no')}-->
			<div class="xi1 bm bm_c">
			    {lang your_mobile_browser}<a href="{$_G['siteurl']}forum.php?mobile=yes">{lang go_to_mobile}</a> <span class="xg1">|</span> <a href="$_G['setting']['mobile']['nomobileurl']">{lang to_be_continue}</a>
			</div>
		<!--{/if}-->
		<!--{if $_G['setting']['shortcut'] && $_G['member'][credits] >= $_G['setting']['shortcut']}-->
			<div id="shortcut">
				<span><a href="javascript:;" id="shortcutcloseid" title="{lang close}">{lang close}</a></span>
				{lang shortcut_notice}
				<a href="javascript:;" id="shortcuttip">{lang shortcut_add}</a>

			</div>
			<script type="text/javascript">setTimeout(setShortcut, 2000);</script>
		<!--{/if}-->

		<!--{if !IS_ROBOT}-->
			<!--{if $_G['uid'] && !empty($_G['style']['extstyle'])}-->
				<div id="sslct_menu" class="cl p_pop" style="display: none;">
					<!--{if !$_G[style][defaultextstyle]}--><span class="sslct_btn" onclick="extstyle('')" title="{lang default}"><i></i></span><!--{/if}-->
					<!--{loop $_G['style']['extstyle'] $extstyle}-->
						<span class="sslct_btn" onclick="extstyle('$extstyle[0]')" title="$extstyle[1]"><i style='background:$extstyle[2]'></i></span>
					<!--{/loop}-->
				</div>
			<!--{/if}-->
			<!--{if $_G['uid']}-->
				<ul id="myitem_menu" class="p_pop" style="display: none;">
					<li><a href="forum.php?mod=guide&view=my">{lang mypost}</a></li>
					<li><a href="home.php?mod=space&do=favorite&view=me">{lang favorite}</a></li>
					<li><a href="home.php?mod=space&do=friend">{lang friends}</a></li>
					<!--{hook/global_myitem_extra}-->
				</ul>
			<!--{/if}-->
			<!--{subtemplate common/header_qmenu}-->
		<!--{/if}-->

		<!--{ad/headerbanner/wp a_h}-->
		<div id="hd">
			<!--{eval $mnid = getcurrentnav();}-->
			<div id="nv">
				<div class="wp">
					<div id="d_avt" {if $_G['uid']}onclick="changepanel()"{/if}>
						<!--{if $_G['uid']}-->
						<!--{avatar($_G[uid],small)}-->
						<!--{else}-->
						<a href="javascript:;" onclick="lsSubmit()">sign</a>
						<!--{/if}-->
					</div>
					<a href="javascript:;" id="qmenu" onmouseover="delayShow(this, function () {showMenu({'ctrlid':'qmenu','pos':'34!','ctrlclass':'a','duration':2});showForummenu($_G[fid]);})">{lang my_nav}</a>
					<ul>
						<!--{loop $_G['setting']['navs'] $nav}-->
							<!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}--><li {if $mnid == $nav[navid]}class="a" {/if}$nav[nav]></li><!--{/if}-->
							<!--{/loop}-->
					</ul>
					<!--subtemplate common/pubsearchform-->
					<!--{hook/global_nav_extra}-->
				</div>
			</div>
			<div class="wp">
				<div class="hdc cl">
					<h2><!--{if !isset($_G['setting']['navlogos'][$mnid])}--><a href="{if $_G['setting']['domain']['app']['default']}http://{$_G['setting']['domain']['app']['default']}/{else}./{/if}" title="$_G['setting']['bbname']">{$_G['style']['boardlogo']}</a><!--{else}-->$_G['setting']['navlogos'][$mnid]<!--{/if}--></h2>
					<!--{template common/header_userstatus}-->
				</div>

				<!--{if !empty($_G['setting']['plugins']['jsmenu'])}-->
					<ul class="p_pop h_pop" id="plugin_menu" style="display: none">
					<!--{loop $_G['setting']['plugins']['jsmenu'] $module}-->
						 <!--{if !$module['adminid'] || ($module['adminid'] && $_G['adminid'] > 0 && $module['adminid'] >= $_G['adminid'])}-->
						 <li>$module[url]</li>
						 <!--{/if}-->
					<!--{/loop}-->
					</ul>
				<!--{/if}-->
				$_G[setting][menunavs]
				<div id="mu" class="cl">
				<!--{if $_G['setting']['subnavs']}-->
					<!--{loop $_G[setting][subnavs] $navid $subnav}-->
						<!--{if $_G['setting']['navsubhover'] || $mnid == $navid}-->
						<ul class="cl {if $mnid == $navid}current{/if}" id="snav_$navid" style="display:{if $mnid != $navid}none{/if}">
						$subnav
						</ul>
						<!--{/if}-->
					<!--{/loop}-->
				<!--{/if}-->
				</div>
				<!--{ad/subnavbanner/a_mu}-->

			</div>
		</div>

		<!--{hook/global_header}-->
	<!--{/if}-->

	<div id="wp" class="wp">
这是HEADER.HTM的文件内容，那个用户卡点右上角的头像就会出来了
04DIV-CSS学习
04DIV-CSS学习*****两列布局
html 页面中动态计算 div 元素的宽度
在我们开发中，经常用到一个给定的div宽度，剩余的自动充满占全，但是，为了适应不同的屏幕的显示大小，我们不能给定值宽度，所以就需要动态的获取，那么，就要采用calc() 函数进行计算。 实例 使用 calc() 函数计算 <div> 元素的宽度: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <style> .test {
html 布局缩放比例,css布局之百分比宽度布局的使用
如何利用百分比布局？本篇文章就给大家介绍css布局之百分比宽度布局的使用。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。百分比是什么？如何设置？百分比是一种相对于包含块的计量单位。百分比宽度的计算： 目标元素宽度/父级元素宽度=百分比宽度它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。大家可以运行后，改变页面大小看看效果！你还可以同时使用 min-width 和 m...
html 图片 并排 总宽度,完美实现两个div并排且宽度为50%
完美实现两个div并排且宽度为50%的css代码，有需要的朋友可参考。在ie8,ff3下都可以，当我用ie6一看就折行了。网上搜了搜，发现在ie6,ie7下如果总宽度为奇数就折行，为偶数正常。打个比方：总宽度为800，那2个div刚好就400，如果总宽度为799，那ie8,ff3下会把分配好，一个400，一个399。而ie6,ie7就都分配成400，加起来800大于799所以会折行。看来直接设wi...
html语言间距怎么设置,HTML文字的间距怎么设置
2 回答2021-01-30 浏览：6 分类：网页设计回答：1、首先打开vscode，随便创建一个H5页面，准备用于之后的演示2、在页面中添加一个div，然后设置宽度为3003、从浏览器打开这个页面，可以看到现在的行间距，如图所示4、如果想要将行间距增大，那么可以在div标签中的style属性中添加line-height属性值5、在浏览器中打开页面，此时就可以看到文字行间距变大了 2 回答2021...
CSS

61,129

社区成员

60,711

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章