zoukankan      html  css  js  c++  java
  • 一个宽度不确定的DIV里放三个水平对齐的DIV,左右两个DIV宽度固定为100px,中间那个DIV自适应宽度

    方法一:浮动  注意三个div的位置

    <html>
    <head>
     <meta charset="utf-8">
     <style type="text/css">
      *{
       margin:0;
       padding:0;
      }
      .left{
        100px;
       background-color: red;
       height:100%;
       float:left;
      }
      .middle{
       auto;
       height:100%;
       background-color: yellow;
      }
      .right{
       100px;
       background-color: blue;
       float:right;
       height:100%;
      }

     </style>
    </head>
    <body>
     <div id="id">
      <div class="left"></div>
      <div class="right"></div>
      <div class="middle"></div>
     </div>
    </body>
    </html>

    方法二:定位

    <html>
    <head>
     <meta charset="utf-8">
     <style type="text/css">
      *{
       margin:0;
       padding:0;
      }
      #id{
       position: relative;
      }
      .left{
        100px;
       background-color: red;
       height:100%;
       position: absolute;
       top:0;
       left:0;
      }
      .middle{
       auto;
       height:100%;
       background-color: yellow;
       margin:0 100px;
      }
      .right{
       100px;
       background-color: blue;
       height:100%;
       position: absolute;
       top:0;
       right:0;
      }

     </style>
    </head>
    <body>
     <div id="id">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
     </div>
    </body>
    </html>

  • 相关阅读:
    JavaScript操作DOM对象
    QTP(13)
    QTP(12)
    QTP(11)
    QTP(10)
    QTP(9)
    QTP(8)
    QTP(7)
    QTP(6)
    QTP(5)
  • 原文地址:https://www.cnblogs.com/happybread/p/8808140.html
Copyright © 2011-2022 走看看