Home  >  Article  >  Web Front-end  >  DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条._html/css_WEB-ITnose

DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条._html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:28:131122browse

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

下面两句很重要的.百分比情况下窗口人为缩小的时候布局混乱问题就解决了.

.divGlobal,.DivTop,.DivBottom{min-width: 760px;width: expression(document.body.clientWidth 

.DivMainLeft{float:left;}
.DivMainRight{margin-left:210px;}


原来粘贴错了.现在好了.不好意思.


 


  New Document
 
 
 
 

 
 

 


  <script><br />// alert(document.body.clientWidth);<br /> //alert(document.body.clientWidth < 760? "760px": "100%" );<br /> </script>

top

 

  

   

    

        
  • 左边固定宽度

  •     
  • 左边固定宽度

  •     
  • 左边固定宽度

  •     
  • 左边固定宽度

  •     
  • 左边固定宽度

  •     
  • 左边固定宽度

  •     

   

   

    

        
  • 左边固定宽度

  •     
  • 左边固定宽度

  •     
  • 左边固定宽度

  •     
  • 左边固定宽度

  •     
  • 左边固定宽度

  •     
  • 左边固定宽度

  •     

   

   
  

  


   

     

         
  • 右边宽度自适应.

  •      
  • 右边宽度自适应

  •      
  • 右边宽度自适应

  •      
  • 右边宽度自适应

  •      
  • 右边宽度自适应

  •      
  • 右边宽度自适应

  •      
  • 右边宽度自适应

  •      

   

   

     

         
  • 右边宽度自适应.

  •      
  • 右边宽度自适应

  •      
  • 右边宽度自适应

  •      
  • 右边宽度自适应

  •      
  • 右边宽度自适应

  •      
  • 右边宽度自适应

  •      
  • 右边宽度自适应

  •      

   

   

     

         
  • 右边宽度自适应.

  •      
  • 右边宽度自适应

  •      
  • 右边宽度自适应

  •      
  • 右边宽度自适应

  •      
  • 右边宽度自适应

  •      
  • 右边宽度自适应

  •      
  • 右边宽度自适应

  •      

   

  


 

 


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

 

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