Maison > interface Web > tutoriel HTML > le corps du texte

Div Css 排版问题_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 12:11:55
original
940 Les gens l'ont consulté

该资源里的Div布局存在一点问题,枉搞人指点并帮我改正

下载后直接浏览是没有问题的,但是当新闻的内容增加一倍后 内容就会超出显示区域


下载地址: Div Css 排版问题


回复讨论(解决方案)

哇,LZ 你这个网页设置搞得也太复杂了吧,布局大多用 position:absolute 去搞(估计你用了Dreamweaver绘制层),何必呢!!!

修改Detail.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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />	<title>无标题文档</title>	<link href="Css/common.css" rel="stylesheet" type="text/css" />	<link href="css/newscontent.css" rel="stylesheet" type="text/css" />	<link href="css/bottommenu.css" rel="stylesheet" type="text/css" />	<link href="CSS/TopMenu.css" rel="stylesheet" type="text/css" /></head><body style="background:#c4c7cc url(Images/bg.jpg) repeat-x scroll 0% 0%"><div id="contain" style="width:1002px;background:url(Images/cbg.gif);margin:0px auto;padding:0px"><div id="top" style="width:1002px;height:372px;background:none transparent scroll repeat 0% 0%"><!-- 图片 --><div id="pdv_17041" class="pdv_class" style="width:990px;height:123px;top:0px;left:6px; z-index:2">	<img  src="Images/top.jpg" border="0"    style="max-width:90%" / alt="Div Css 排版问题_html/css_WEB-ITnose" ></div><!-- 网站标志 --><div id="pdv_10806" class="pdv_class" style="width:341px;height:98px;top:0px;left:6px; z-index:5">	<img  src="Images/logo.jpg" border="0" / alt="Div Css 排版问题_html/css_WEB-ITnose" ></div><!-- 一级导航菜单 --><div id="pdv_10994" class="pdv_class"     style="max-width:90%">	<div style="padding:0px">		<div id="menumain">			<div class="mainmenuiner">				<a href="index.php"class="menumain">网站首页</a>				<a href="page/html/company.php"class="menumain">公司简介</a>				<a href="news/class/"class="menumain">新闻资讯</a>				<a href="product/class/"class="menumain">产品展示</a>				<a href="page/tech/equipment.php"class="menumain">科技实力</a>				<a href="page/contact/contact.php"class="menumain">联系我们</a>			</div>		</div>	</div></div><!-- 焦点图 --><div id="pdv_17044" class="pdv_class" style="width:990px;height:247px;top:123px;left:6px; z-index:9">	<div style="padding:0px">		<div align="center">			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id=scriptmain name=scriptmain codebase="http://download.macromedia.com/pub/shockwave/cabs/		flash/swflash.cab#version=6,0,29,0" width="990"  style="max-width:90%">			  <param name="movie" value="advs/templates/images/lbxml.swf?bcastr_xml_url=advs/xml/lbxml.php?g=1|">			  <param name="quality" value="high">			  <param name=scale value=noscale>			  <param name="LOOP" value="false">			  <param name="menu" value="false">			  <param name="wmode" value="transparent">			  <embed src="advs/templates/images/lbxml.swf?bcastr_xml_url=advs/xml/lbxml.php?g=1|" width="990" height="247"  loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" salign="T" name="scriptmain" menu="false" wmode="transparent"></embed>			</object>		</div>	</div></div></div></div><div style="width:1002px; background:url(Images/cbg.jpg) top left  repeat-y;margin:0px auto; margin-top:-1px; padding:0"><div style="width:1002px; background:url(Images/left_bg.jpg) top left no-repeat;margin:0 6px; padding:0">	<div style="width:225px; min-height:475px; float:left; margin:0; ">			<div class="pdv_border" style="border:0px;height:100%;padding:0;margin:45px 0 0 30px;">					<div style="height:23px;border:0px;padding:0;margin:0;background:url(images/news_class.jpg) 0px 0px no-repeat;"></div>					<div style="margin:0px;padding:0px;">						<link href="css/newsclass.css" rel="stylesheet" type="text/css" />						<div class="newsclass_dolphin">							<a href="../../news/class/?86.html" target="_self" class="newsclass_dolphin">公司新闻</a>							<a href="../../news/class/?95.html" target="_self" class="newsclass_dolphin">行业动态</a>						</div>					</div>		</div>	</div>	<div style="width:700px; min-height:475px;  float:right; margin:0; margin-right:10px; padding:45px 30px 30px 30px;">			<div class="pdv_border" style="border:0px; padding:0;margin:0;background:url(images/location.gif) 0px 0px no-repeat; height:30px;">				<div style="float:right;width:10px;height:100%;background:url(images/location.gif) -990px 0px no-repeat;"></div>				<link href="css/nav.css" rel="stylesheet" type="text/css" />				<div id="nav">					您现在的位置:<a href="../../">汽车电子公司</a>> <a href="../../news/" >新闻中心</a> 				</div>									</div>						<div id="newscontent">				<div class="newstitle">注重科技创新提高产品竞争力注重科技创新提高产品竞争力</div>				<div class="info">发布时间:2010-05-25 14:58:57    文字:【<a  href="javascript:fontZoom(16)">大</a>】【<a  href="javascript:fontZoom(14)">中</a>】【<a   href="javascript:fontZoom(12)">小</a>】</div>				<div id="memo" class="memo" style="display:none"><span style="color:#ff6600">摘要:</span></div>				<div id="con" class="con">注重科技创新 提高产品竞争力科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创注重科技创新 提高产品竞争力科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创注重科技创新 提高产品竞争力科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品竞争科技创新 提高产品</div>					<div id="contentpages">						<p>上一条:dsadsa</p>						<p>下一条:dsadsa</p>					</div>					<div class="tags" style="display:none">标签:</div></div>			<script>				function fontZoom(size){				   document.getElementById("con").style.fontSize=size+"px";				}				</script>		</div>	<div style="clear:both"></div></div></div></div><div id="bottom" style="width:1002px;height:89px;background:url(Images/cbg.jpg) repeat-y; margin-top:0"><!-- 图片/FLASH --><div id="pdv_10801" class="pdv_class" style="width:990px;height:87px;top:0px;left:6px; z-index:3">	<img  src="Images/bottom.jpg" border="0"    style="max-width:90%" / alt="Div Css 排版问题_html/css_WEB-ITnose" ></div><!-- 底部菜单(一级) --><div id="pdv_10813" class="pdv_class"   style="width:1002px;height:26px;top:17px;left:0px; z-index:4">		<div id="bottommenu">|		<a href="page/html/company.php">关于我们</a>|		<a href="page/contact/contact.php">联系方式</a>|		<a href="page/contact/message.php">信息反馈</a>|		<a href="job/index.php">人才招聘</a>|		<a href="advs/link/">友情链接</a>|	</div></div><!-- 底部信息编辑区 --><div id="pdv_10807" class="pdv_class"  title="脚注信息" style="width:1002px;height:20px;top:41px;left:0px; z-index:6">	<div style="width:100%;text-align:center;font:12px/20px Arial, Helvetica, sans-serif">		<div style="MARGIN: 0px; COLOR: #6c6c6c; LINE-HEIGHT: 24px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-ALIGN: center">汽车电子公司</div>	</div></div></div></body></html>
Copier après la connexion

css文件修改:newscontent.css

div#newscontent{	text-align:left;	padding:0 50px 10px 10px }..../* ============翻页============== */div#contentpages {	margin:0;	padding:0;	height:39px;	padding-bottom:}.....
Copier après la connexion

楼主 你把 id="contain" 的height 定义死了,所以当新闻内容增加后,背景没有重复。

打漏:

/* ============翻页============== */
div#contentpages {
    margin:0;
    padding:0;
    height:39px;
    padding-bottom: 30px}
.....

十分感谢【LXH060204】  

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal