当前位置: 代码迷 >> HTML/CSS >> DIV里的table百分比宽度有关问题,非常感谢
  详细解决方案

DIV里的table百分比宽度有关问题,非常感谢

热度:506   发布时间:2012-02-19 19:43:38.0
DIV里的table百分比宽度问题,非常感谢!


  一行两个DIV   .   左边DIV宽度固定   右边的自适应   右边DIV里放置table   其   width=   "100% "   此时表格会把屏幕撑宽了出现左右滚动条.这个滚动条是不该出现的!!!


我弄了好几天了.郁闷啊,谢谢


<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN ">
<html   xmlns= "http://www.w3.org/1999/xhtml "   >
<head>
        <title> Untitled   Page </title>
        <style>


  body   {margin-left:   0px;margin-top:   0px;margin-right:   0px;margin-bottom:   0px;width:   100%;height:   100%;font-size:   13px;color:#000;padding:   0px;margin:   0px;
}
div,form,img,ul,ol,li,dl,dt,dd   {margin:   0;   padding:   0;   border:   0;}
h4{font-size:14px;}
p,li{padding-left:20px;padding-right:20px;}
img{border:0px}
p{padding-top:0px;line-height:20px;   font-size:15px;}
table{padding:10px;;width:100%;position:absolute;}
td{text-align:center;}
span.CityBig{color:#777;}

a:link   {color:   #000;   text-decoration:none;}
a:visited   {color:   #000;text-decoration:none;}
a:hover   {color:   #000;   text-decoration:none;}
a:active   {color:   #000;}

ul{padding:0px;   /*fiexfox里需要设置此项,否则UR和DIV间会有空白*/margin:0px;}
ul.Normal{margin:0px;margin-left:0px;padding-left:0px;   /*fiexfox里需要设置此项,否则UR和DIV间会有空白*/}
li{margin-left:0px;list-style-type:none;padding:2px;line-height:18px;padding-left:20px;padding-right:20px;}
li.LiBg   {margin-left:0px;background-color:#ffDD00;list-style-type:none;padding:5px;}
li.LiNormal   {margin-left:30px;list-style-type:circle;}

#Menu{background-color:   #FFB13E;width:100%;border-bottom:1px   solid   #ef8a04;border-top:1px   solid   #ef8a04;height:23px;}
#Menu   li{   width:   90px;     padding-top:4px;   padding-bottom:4px;text-align:center;   float:   left;margin-left:0px;padding-left:0px;padding-right:0px;}  

.Main,.Top,.Bottom,#Menu{min-width:   760px;width:   expression(document.body.clientWidth   <   820?   "820px ":   "100% "   )/*最小宽度设置*/;width:100%;}
.MainLeft,.MainRight   {border:1px   solid   #FFB13E;}
.Bottom   {text-align:center;}
.MainLeft{float:left;}
.MainRight{margin-left:210px;}
.MainLeftChild{width:200px;}
.MainRightChild{}
.MainRightChild   img   {width:150px;   height:100px;border   solid   2px   #000;}
.MainLeftNoBorder{float:left;}
.MainRightNoBorder{margin-left:210px;}
.MainLeft   li{padding:2px;}

.ArtileTitle,.ArticleDate{text-align:center;}
.ArtileTitle{font-size:   20px;font-weight:bolder;padding:10px;}
.clear{clear:   both;}
.Right{text-align:right;}
.Left{text-align:left;float:left;}
</style>
  </head>
  <body     >


   


          <div   class= "Main ">
    <div   class= "MainLeft ">
    <div   class= "MainLeftChild ">
    <ul   class= "Normal ">
<li   class   = "LiBg "> 1&nbsp;&nbsp; <a   href= " "   target= "_blank "   > 更多> > </a> </li>
<li     > 左边固定宽度 </li>
  相关解决方案