>웹 프론트엔드 >HTML 튜토리얼 >DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条._html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-24 12:28:131192검색

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测试通过.
辛苦几天的结果啊
平行共三行,中间行分两列,左边固定宽度,右边自适应,并且对行宽度设置了最小值,如果窗口小到最小值以下将出现滚动条,这样一来布局就不会乱了.

 

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.