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>

  • 相关阅读:
    puppet运维配置实列
    puppet yum仓库
    autoSvn
    centos svn快速搭建
    无交互 直接传入 -yes
    puppet案例
    if
    CentosX64使用yum快速搭建xen虚拟化环境
    groupinfo
    Ubuntu编码问题
  • 原文地址:https://www.cnblogs.com/happybread/p/8808140.html
Copyright © 2011-2022 走看看