zoukankan      html  css  js  c++  java
  • 左右两边固定,中间自适应

    1.左右固定,中间自适应

    代码:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <style>
        .test{
          position:relative;
          height:100px;
        }
        .left,.right,.center{
          position:absolute;
          top:0;bottom:0;
        }
        .left{
          background:red;
         100px;
          left:0;
        }
        .center{
          left:100px;
          right:100px;
          background:blue;
        }
        .right{
          right:0;
          100px;
          background:yellow;   
        }
      </style>
    </head>
    <body>
    <div class="test">
       <div class="left">左</div>
      <div class="center">ddd</div>
       <div class="right">右<br>fdfd <br>hang <br>oooo</div>
    </div>
    </body>
    </html>
    

    效果:

    2.左侧固定,右侧自适应

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <style>
        .test{
         position:relative;
         height:100px;
        }
        .left,.right{
          position:absolute;
          top:0;bottom:0;
        }
        .left{
          background:red;
          100px;
        }
        .right{
          left:100px;
          right:0;
          background:yellow;   
        }
      </style>
    </head>
    <body>
    <div class="test">
       <div class="left">左</div>
       <div class="right">右<br>fdfd <br>hang <br>oooo</div>
    </div>
    </body>
    </html>
    

    效果:

    总结:有固定,有自适应,用定位来布局,固定的写固定宽度,不固定的分别设置left值和right值;

    left:0;right:0,可以让容器和父容器一样宽,top:0;bottom:0;可以让元素和父元素一样高。

  • 相关阅读:
    c++ stl常用
    c++流操作
    操作符重载operator
    函数指针和指针函数
    指针c艹
    Oracle 账户锁定问题解决办法
    java回收算法
    JDK与JRE的区别
    关于getClass().getClassLoader()
    After reading a picture than out a picture
  • 原文地址:https://www.cnblogs.com/lichaoqing/p/5674318.html
Copyright © 2011-2022 走看看