html css div自适应屏幕宽度，高度

其他 2018-05-08 23:00:00 阅读次数: 3

做C/S项目其实最让人蛋疼的无非就是兼容问题，各种浏览器的不兼容外还有div+css不科学的显示问题。所以针对div+css窗口最大化、缩小的自适应加以解决。

[html] view plain copy
print ?
  1. <!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0 Transitional//EN”>    
  2. <HTML>    
  3.  <HEAD>    
  4.   <TITLE> New Document </TITLE>    
  5.   <META NAME=“Generator” CONTENT=“EditPlus”>    
  6.   <META NAME=“Author” CONTENT=“”>    
  7.   <META NAME=“Keywords” CONTENT=“”>    
  8.   <META NAME=“Description” CONTENT=“”>    
  9.     
  10.   <style>    
  11. .divGlobal,.DivTop,.DivBottom{min-width: 760px;width: expression(document.body.clientWidth < 760? “760px”: “100%” )/*最小宽度设置*/;width:100%;}    
  12.  .divGlobal{/*border:1px solid #ff0000;*/}    
  13. .DivTop,.DivBottom,.DivMainLeft,.DivMainRight {border:1px solid #ff0000;}    
  14. .DivBottom {clear: both;}    
  15. .DivMainLeft{float:left;}    
  16. .DivMainRight{margin-left:210px;}    
  17. .DivFiexWidth{width:200px;}    
  18. .DivMainRightChild{}    
  19. .clear{clear: both;}    
  20.  ul.ul1{margin:0px;margin-left:0px;padding-left:0px; /*fiexfox里需要设置此项,否则UR和DIV间会有空白*/}    
  21.  li.li1{margin-left:0px;list-style-type:none;}    
  22.  li.liBg {margin-left:0px;background-color:#ffDD00;list-style-type:none;padding:5px;}    
  23.   </style>    
  24.  </HEAD>    
  25.     
  26.  <BODY>    
  27.   <script>    
  28. // alert(document.body.clientWidth);    
  29.  //alert(document.body.clientWidth < 760? “760px”: “100%” );    
  30.   </script>    
  31. <div class=“DivTop”>    
  32. top    
  33. </div>    
  34.   <div class=“divGlobal”>    
  35.    <div class=“DivMainLeft”>    
  36.     <div class=“DivFiexWidth”>    
  37.      <ul class=“ul1”>    
  38.     <li class =“liBg”>左边固定宽度</li>    
  39.     <li class =“li1”>左边固定宽度</li>    
  40.     <li class =“li1”>左边固定宽度</li>    
  41.     <li class =“li1”>左边固定宽度</li>    
  42.     <li class =“li1”>左边固定宽度</li>    
  43.     <li class =“li1”>左边固定宽度</li>    
  44.      </ul>    
  45.     </div>    
  46.    <div class=“DivFiexWidth”>    
  47.      <ul class=“ul1”>    
  48.     <li class =“liBg”>左边固定宽度</li>    
  49.     <li class =“li1”>左边固定宽度</li>    
  50.     <li class =“li1”>左边固定宽度</li>    
  51.     <li class =“li1”>左边固定宽度</li>    
  52.     <li class =“li1”>左边固定宽度</li>    
  53.     <li class =“li1”>左边固定宽度</li>    
  54.      </ul>    
  55.     </div>    
  56.    <!– <div class=“DivFiexWidth”>    
  57.      <ul class=“ul1”>    
  58.     <li class =“liBg”>左边固定宽度</li>    
  59.     <li class =“li1”>左边固定宽度</li>    
  60.     <li class =“li1”>左边固定宽度</li>    
  61.     <li class =“li1”>左边固定宽度</li>    
  62.     <li class =“li1”>左边固定宽度</li>    
  63.     <li class =“li1”>左边固定宽度</li>    
  64.      </ul>    
  65.     </div>    
  66.      <div class=“DivFiexWidth”>    
  67.      <ul class=“ul1”>    
  68.     <li class =“liBg”>左边固定宽度</li>    
  69.     <li class =“li1”>左边固定宽度</li>    
  70.     <li class =“li1”>左边固定宽度</li>    
  71.     <li class =“li1”>左边固定宽度</li>    
  72.     <li class =“li1”>左边固定宽度</li>    
  73.     <li class =“li1”>左边固定宽度</li>    
  74.      </ul>    
  75.     </div>    
  76.      <div class=“DivFiexWidth”>    
  77.      <ul class=“ul1”>    
  78.     <li class =“liBg”>左边固定宽度</li>    
  79.     <li class =“li1”>左边固定宽度</li>    
  80.     <li class =“li1”>左边固定宽度</li>    
  81.     <li class =“li1”>左边固定宽度</li>    
  82.     <li class =“li1”>左边固定宽度</li>    
  83.     <li class =“li1”>左边固定宽度</li>    
  84.      </ul>    
  85.     </div> –>    
  86.    </div>    
  87.     
  88.   <div class=“DivMainRight”>    
  89.     <div class=“DivMainRightChild” >    
  90.       <ul class=“ul1”>    
  91.      <li class =“liBg”>右边宽度自适应.</li>    
  92.      <li class =“li1”>右边宽度自适应</li>    
  93.      <li class =“li1”>右边宽度自适应</li>    
  94.      <li class =“li1”>右边宽度自适应</li>    
  95.      <li class =“li1”>右边宽度自适应</li>    
  96.      <li class =“li1”>右边宽度自适应</li>    
  97.      <li class =“li1”>右边宽度自适应</li>    
  98.       </ul>    
  99.     </div>    
  100.     <div class=“DivMainRightChild” >    
  101.       <ul class=“ul1”>    
  102.      <li class =“liBg”>右边宽度自适应.</li>    
  103.      <li class =“li1”>右边宽度自适应</li>    
  104.      <li class =“li1”>右边宽度自适应</li>    
  105.      <li class =“li1”>右边宽度自适应</li>    
  106.      <li class =“li1”>右边宽度自适应</li>    
  107.      <li class =“li1”>右边宽度自适应</li>    
  108.      <li class =“li1”>右边宽度自适应</li>    
  109.       </ul>    
  110.     </div>    
  111.     <div class=“DivMainRightChild” >    
  112.       <ul class=“ul1”>    
  113.      <li class =“liBg”>右边宽度自适应.</li>    
  114.      <li class =“li1”>右边宽度自适应</li>    
  115.      <li class =“li1”>右边宽度自适应</li>    
  116.      <li class =“li1”>右边宽度自适应</li>    
  117.      <li class =“li1”>右边宽度自适应</li>    
  118.      <li class =“li1”>右边宽度自适应</li>    
  119.      <li class =“li1”>右边宽度自适应</li>    
  120.       </ul>    
  121.     </div>    
  122.     
  123.    </div>    
  124.  </div>    
  125.     
  126.      
  127.     
  128. <div class=“DivBottom”>    
  129. DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;firefox ie测试通过.    
  130. 辛苦几天的结果啊    
  131. 平行共三行,中间行分两列,左边固定宽度,右边自适应,并且对行宽度设置了最小值,如果窗口小到最小值以下将出现滚动条,这样一来布局就不会乱了.    
  132. </div>    
  133.  </BODY>    
  134. </HTML>    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<HTML>  
 <HEAD>  
  <TITLE> New Document </TITLE>  
  <META NAME="Generator" CONTENT="EditPlus">  
  <META NAME="Author" CONTENT="">  
  <META NAME="Keywords" CONTENT="">  
  <META NAME="Description" CONTENT="">  

  <style>  
.divGlobal,.DivTop,.DivBottom{min-width: 760px;width: expression(document.body.clientWidth < 760? "760px": "100%" )/*最小宽度设置*/;width:100%;}  
 .divGlobal{/*border:1px solid #ff0000;*/}  
.DivTop,.DivBottom,.DivMainLeft,.DivMainRight {border:1px solid #ff0000;}  
.DivBottom {clear: both;}  
.DivMainLeft{float:left;}  
.DivMainRight{margin-left:210px;}  
.DivFiexWidth{width:200px;}  
.DivMainRightChild{}  
.clear{clear: both;}  
 ul.ul1{margin:0px;margin-left:0px;padding-left:0px; /*fiexfox里需要设置此项,否则UR和DIV间会有空白*/}  
 li.li1{margin-left:0px;list-style-type:none;}  
 li.liBg {margin-left:0px;background-color:#ffDD00;list-style-type:none;padding:5px;}  
  </style>  
 </HEAD>  

 <BODY>  
  <script>  
// alert(document.body.clientWidth);  
 //alert(document.body.clientWidth < 760? "760px": "100%" );  
  </script>  
<div class="DivTop">  
top  
</div>  
  <div class="divGlobal">  
   <div class="DivMainLeft">  
    <div class="DivFiexWidth">  
     <ul class="ul1">  
    <li class ="liBg">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
     </ul>  
    </div>  
   <div class="DivFiexWidth">  
     <ul class="ul1">  
    <li class ="liBg">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
     </ul>  
    </div>  
   <!-- <div class="DivFiexWidth">  
     <ul class="ul1">  
    <li class ="liBg">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
     </ul>  
    </div>  
     <div class="DivFiexWidth">  
     <ul class="ul1">  
    <li class ="liBg">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
     </ul>  
    </div>  
     <div class="DivFiexWidth">  
     <ul class="ul1">  
    <li class ="liBg">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
     </ul>  
    </div> -->  
   </div>  

  <div class="DivMainRight">  
    <div class="DivMainRightChild" >  
      <ul class="ul1">  
     <li class ="liBg">右边宽度自适应.</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
      </ul>  
    </div>  
    <div class="DivMainRightChild" >  
      <ul class="ul1">  
     <li class ="liBg">右边宽度自适应.</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
      </ul>  
    </div>  
    <div class="DivMainRightChild" >  
      <ul class="ul1">  
     <li class ="liBg">右边宽度自适应.</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
      </ul>  
    </div>  

   </div>  
 </div>  



<div class="DivBottom">  
DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;firefox ie测试通过.  
辛苦几天的结果啊  
平行共三行,中间行分两列,左边固定宽度,右边自适应,并且对行宽度设置了最小值,如果窗口小到最小值以下将出现滚动条,这样一来布局就不会乱了.  
</div>  
 </BODY>  
</HTML>


 

做C/S项目其实最让人蛋疼的无非就是兼容问题，各种浏览器的不兼容外还有div+css不科学的显示问题。所以针对div+css窗口最大化、缩小的自适应加以解决。

[html] view plain copy
print ?
  1. <!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0 Transitional//EN”>    
  2. <HTML>    
  3.  <HEAD>    
  4.   <TITLE> New Document </TITLE>    
  5.   <META NAME=“Generator” CONTENT=“EditPlus”>    
  6.   <META NAME=“Author” CONTENT=“”>    
  7.   <META NAME=“Keywords” CONTENT=“”>    
  8.   <META NAME=“Description” CONTENT=“”>    
  9.     
  10.   <style>    
  11. .divGlobal,.DivTop,.DivBottom{min-width: 760px;width: expression(document.body.clientWidth < 760? “760px”: “100%” )/*最小宽度设置*/;width:100%;}    
  12.  .divGlobal{/*border:1px solid #ff0000;*/}    
  13. .DivTop,.DivBottom,.DivMainLeft,.DivMainRight {border:1px solid #ff0000;}    
  14. .DivBottom {clear: both;}    
  15. .DivMainLeft{float:left;}    
  16. .DivMainRight{margin-left:210px;}    
  17. .DivFiexWidth{width:200px;}    
  18. .DivMainRightChild{}    
  19. .clear{clear: both;}    
  20.  ul.ul1{margin:0px;margin-left:0px;padding-left:0px; /*fiexfox里需要设置此项,否则UR和DIV间会有空白*/}    
  21.  li.li1{margin-left:0px;list-style-type:none;}    
  22.  li.liBg {margin-left:0px;background-color:#ffDD00;list-style-type:none;padding:5px;}    
  23.   </style>    
  24.  </HEAD>    
  25.     
  26.  <BODY>    
  27.   <script>    
  28. // alert(document.body.clientWidth);    
  29.  //alert(document.body.clientWidth < 760? “760px”: “100%” );    
  30.   </script>    
  31. <div class=“DivTop”>    
  32. top    
  33. </div>    
  34.   <div class=“divGlobal”>    
  35.    <div class=“DivMainLeft”>    
  36.     <div class=“DivFiexWidth”>    
  37.      <ul class=“ul1”>    
  38.     <li class =“liBg”>左边固定宽度</li>    
  39.     <li class =“li1”>左边固定宽度</li>    
  40.     <li class =“li1”>左边固定宽度</li>    
  41.     <li class =“li1”>左边固定宽度</li>    
  42.     <li class =“li1”>左边固定宽度</li>    
  43.     <li class =“li1”>左边固定宽度</li>    
  44.      </ul>    
  45.     </div>    
  46.    <div class=“DivFiexWidth”>    
  47.      <ul class=“ul1”>    
  48.     <li class =“liBg”>左边固定宽度</li>    
  49.     <li class =“li1”>左边固定宽度</li>    
  50.     <li class =“li1”>左边固定宽度</li>    
  51.     <li class =“li1”>左边固定宽度</li>    
  52.     <li class =“li1”>左边固定宽度</li>    
  53.     <li class =“li1”>左边固定宽度</li>    
  54.      </ul>    
  55.     </div>    
  56.    <!– <div class=“DivFiexWidth”>    
  57.      <ul class=“ul1”>    
  58.     <li class =“liBg”>左边固定宽度</li>    
  59.     <li class =“li1”>左边固定宽度</li>    
  60.     <li class =“li1”>左边固定宽度</li>    
  61.     <li class =“li1”>左边固定宽度</li>    
  62.     <li class =“li1”>左边固定宽度</li>    
  63.     <li class =“li1”>左边固定宽度</li>    
  64.      </ul>    
  65.     </div>    
  66.      <div class=“DivFiexWidth”>    
  67.      <ul class=“ul1”>    
  68.     <li class =“liBg”>左边固定宽度</li>    
  69.     <li class =“li1”>左边固定宽度</li>    
  70.     <li class =“li1”>左边固定宽度</li>    
  71.     <li class =“li1”>左边固定宽度</li>    
  72.     <li class =“li1”>左边固定宽度</li>    
  73.     <li class =“li1”>左边固定宽度</li>    
  74.      </ul>    
  75.     </div>    
  76.      <div class=“DivFiexWidth”>    
  77.      <ul class=“ul1”>    
  78.     <li class =“liBg”>左边固定宽度</li>    
  79.     <li class =“li1”>左边固定宽度</li>    
  80.     <li class =“li1”>左边固定宽度</li>    
  81.     <li class =“li1”>左边固定宽度</li>    
  82.     <li class =“li1”>左边固定宽度</li>    
  83.     <li class =“li1”>左边固定宽度</li>    
  84.      </ul>    
  85.     </div> –>    
  86.    </div>    
  87.     
  88.   <div class=“DivMainRight”>    
  89.     <div class=“DivMainRightChild” >    
  90.       <ul class=“ul1”>    
  91.      <li class =“liBg”>右边宽度自适应.</li>    
  92.      <li class =“li1”>右边宽度自适应</li>    
  93.      <li class =“li1”>右边宽度自适应</li>    
  94.      <li class =“li1”>右边宽度自适应</li>    
  95.      <li class =“li1”>右边宽度自适应</li>    
  96.      <li class =“li1”>右边宽度自适应</li>    
  97.      <li class =“li1”>右边宽度自适应</li>    
  98.       </ul>    
  99.     </div>    
  100.     <div class=“DivMainRightChild” >    
  101.       <ul class=“ul1”>    
  102.      <li class =“liBg”>右边宽度自适应.</li>    
  103.      <li class =“li1”>右边宽度自适应</li>    
  104.      <li class =“li1”>右边宽度自适应</li>    
  105.      <li class =“li1”>右边宽度自适应</li>    
  106.      <li class =“li1”>右边宽度自适应</li>    
  107.      <li class =“li1”>右边宽度自适应</li>    
  108.      <li class =“li1”>右边宽度自适应</li>    
  109.       </ul>    
  110.     </div>    
  111.     <div class=“DivMainRightChild” >    
  112.       <ul class=“ul1”>    
  113.      <li class =“liBg”>右边宽度自适应.</li>    
  114.      <li class =“li1”>右边宽度自适应</li>    
  115.      <li class =“li1”>右边宽度自适应</li>    
  116.      <li class =“li1”>右边宽度自适应</li>    
  117.      <li class =“li1”>右边宽度自适应</li>    
  118.      <li class =“li1”>右边宽度自适应</li>    
  119.      <li class =“li1”>右边宽度自适应</li>    
  120.       </ul>    
  121.     </div>    
  122.     
  123.    </div>    
  124.  </div>    
  125.     
  126.      
  127.     
  128. <div class=“DivBottom”>    
  129. DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;firefox ie测试通过.    
  130. 辛苦几天的结果啊    
  131. 平行共三行,中间行分两列,左边固定宽度,右边自适应,并且对行宽度设置了最小值,如果窗口小到最小值以下将出现滚动条,这样一来布局就不会乱了.    
  132. </div>    
  133.  </BODY>    
  134. </HTML>    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<HTML>  
 <HEAD>  
  <TITLE> New Document </TITLE>  
  <META NAME="Generator" CONTENT="EditPlus">  
  <META NAME="Author" CONTENT="">  
  <META NAME="Keywords" CONTENT="">  
  <META NAME="Description" CONTENT="">  

  <style>  
.divGlobal,.DivTop,.DivBottom{min-width: 760px;width: expression(document.body.clientWidth < 760? "760px": "100%" )/*最小宽度设置*/;width:100%;}  
 .divGlobal{/*border:1px solid #ff0000;*/}  
.DivTop,.DivBottom,.DivMainLeft,.DivMainRight {border:1px solid #ff0000;}  
.DivBottom {clear: both;}  
.DivMainLeft{float:left;}  
.DivMainRight{margin-left:210px;}  
.DivFiexWidth{width:200px;}  
.DivMainRightChild{}  
.clear{clear: both;}  
 ul.ul1{margin:0px;margin-left:0px;padding-left:0px; /*fiexfox里需要设置此项,否则UR和DIV间会有空白*/}  
 li.li1{margin-left:0px;list-style-type:none;}  
 li.liBg {margin-left:0px;background-color:#ffDD00;list-style-type:none;padding:5px;}  
  </style>  
 </HEAD>  

 <BODY>  
  <script>  
// alert(document.body.clientWidth);  
 //alert(document.body.clientWidth < 760? "760px": "100%" );  
  </script>  
<div class="DivTop">  
top  
</div>  
  <div class="divGlobal">  
   <div class="DivMainLeft">  
    <div class="DivFiexWidth">  
     <ul class="ul1">  
    <li class ="liBg">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
     </ul>  
    </div>  
   <div class="DivFiexWidth">  
     <ul class="ul1">  
    <li class ="liBg">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
     </ul>  
    </div>  
   <!-- <div class="DivFiexWidth">  
     <ul class="ul1">  
    <li class ="liBg">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
     </ul>  
    </div>  
     <div class="DivFiexWidth">  
     <ul class="ul1">  
    <li class ="liBg">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
     </ul>  
    </div>  
     <div class="DivFiexWidth">  
     <ul class="ul1">  
    <li class ="liBg">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
    <li class ="li1">左边固定宽度</li>  
     </ul>  
    </div> -->  
   </div>  

  <div class="DivMainRight">  
    <div class="DivMainRightChild" >  
      <ul class="ul1">  
     <li class ="liBg">右边宽度自适应.</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
      </ul>  
    </div>  
    <div class="DivMainRightChild" >  
      <ul class="ul1">  
     <li class ="liBg">右边宽度自适应.</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
      </ul>  
    </div>  
    <div class="DivMainRightChild" >  
      <ul class="ul1">  
     <li class ="liBg">右边宽度自适应.</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
     <li class ="li1">右边宽度自适应</li>  
      </ul>  
    </div>  

   </div>  
 </div>  



<div class="DivBottom">  
DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;firefox ie测试通过.  
辛苦几天的结果啊  
平行共三行,中间行分两列,左边固定宽度,右边自适应,并且对行宽度设置了最小值,如果窗口小到最小值以下将出现滚动条,这样一来布局就不会乱了.  
</div>  
 </BODY>  
</HTML>


 

猜你喜欢

转载自blog.csdn.net/jun_web_yang/article/details/78363357
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022