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 走看看