> 웹 프론트엔드 > HTML 튜토리얼 > Div Css 排版问题_html/css_WEB-ITnose

Div Css 排版问题_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:11:55
원래의
968명이 탐색했습니다.

该资源里的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>
로그인 후 복사

css文件修改:newscontent.css

div#newscontent{	text-align:left;	padding:0 50px 10px 10px }..../* ============翻页============== */div#contentpages {	margin:0;	padding:0;	height:39px;	padding-bottom:}.....
로그인 후 복사

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

打漏:

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

十分感谢【LXH060204】  

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿