zoukankan      html  css  js  c++  java
  • DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.

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

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

    .divGlobal,.DivTop,.DivBottom{min- 760px; expression(document.body.clientWidth < 760? "760px": "100%" )/*最小宽度设置*/;100%;}
    .DivMainLeft{float:left;}
    .DivMainRight{margin-left:210px;}


    原来粘贴错了.现在好了.不好意思.
    <!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- 760px; expression(document.body.clientWidth < 760? "760px": "100%" )/*最小宽度设置*/;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{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>

  • 相关阅读:
    GGEditor
    Vue 项目(HTML5 History 模式) 部署服务器
    mysql连接状态
    mysql连接状态
    HBase配置性能调优
    HBase配置性能调优
    spark streaming检查点使用
    spark streaming检查点使用
    spark streaming的有状态例子
    spark streaming的有状态例子
  • 原文地址:https://www.cnblogs.com/adandelion/p/759858.html
Copyright © 2011-2022 走看看