Home > Article > Web Front-end > Div Css typesetting problem_html/css_WEB-ITnose
Div Css typesetting problem_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:11:55946browse
该资源里的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" width="100%" /></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" /></div><!-- 一级导航菜单 --><div id="pdv_10994" class="pdv_class" style="width:648px;height:35px;top:81px;left:354px; z-index:7"> <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" height="247"> <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" width="100%" /></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】
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Ask a strange question about HTML A tag_html/css_WEB-ITnoseNext article：Ask a strange question about HTML A tag_html/css_WEB-ITnose