zoukankan      html  css  js  c++  java
  • 实现左边定宽右边自适应效果

    Q 问:

    现在有一个容器,其中放有两个div,HTML和CSS代码如下所示。
    我们需要这两个div并排在一行,并使左边的div宽度确定, 右边的div宽度能够自适应剩余的容器宽度 。
    请写出你能想到的所有可能。

    @-v-@

    <div class="cont">
      <div class="left-item">
    
      </div>
      <div class="right-item">
    
      </div>
    </div>
    
    html,body {
      margin: 0;
      padding: 0;
      height: 100%;
      background-color: #ffffff;
    }
    .cont {
      width: 80%;
      height: 40%;
      margin: 50px auto 0;
      background-color: #f4f4f4;
    }
    .left-item{
      width: 10em;
      height: 100%;
      background-color: #0099ff;
    }
    .right-item{
      height: 100%;
      background-color: #ff6666;
    }
    

    A 答:

    第一种 all inline-block + calc()

    .cont {
      font-size: 0;
    }
    .left-item {
      font-size: 16px;
      display: inline-block;
    }
    .right-item {
      font-size: 16px;
      display: inline-block;
      width: calc(100% - 10em);
    }
    

    第二种 all float + calc()

    .cont {
      zoom: 1;
    }
    .cont::after {
      content: ' ';
      display: block;
      font-size: 0;
      line-height: 0;
      clear: both;
      overflow: hidden;
      visibility: hidden;
    }
    .left-item {
      float: left;
    }
    .right-item {
      float: right;
      width: calc(100% - 10em);
    }
    

    第三种 left float

    .cont {
      zoom: 1;
    }
    .cont::after {
      content: ' ';
      display: block;
      font-size: 0;
      line-height: 0;
      clear: both;
      overflow: hidden;
      visibility: hidden;
    }
    .left-item {
      float: left;
    }
    .right-item {
      width: 100%;
      padding-left: 10em;
      box-sizing: border-box;
    }
    

    第四种 left absolute

    .cont {
      position: relative;
    }
    .left-item {
      position: absolute;
    }
    .right-item {
      width: 100%;
      padding-left: 10em;
      box-sizing: border-box;
    }
    

    第五种 all absolute

    .cont {
      position: relative;
    }
    .left-item {
      position: absolute;
    }
    .right-item {
      position: absolute;
      left: 10em;
      right: 0;
    }
    

    第六种 right flex

    .cont {
      display: -webkit-flex;
      display: -ms-flex;
      -webkit-display: flex;
      -ms-display: flex;
      display: flex;
    }
    .left-item {}
    .right-item {
      flex: 1;
    }
    

    第七种 table

    .cont {
      display: table;
    }
    .left-item {
      display: table-cell;
    }
    .right-item {
      display: table-cell;
    }
    

    第八种 grid

    .cont {
      display: grid;
      grid-template-columns: 10em auto;
    }
    .left-item {
    }
    .right-item {
    }
    

    综上:

    针对布局问题,可以使用 flex / table / grid 可以搞定。
    如果要考虑兼容性问题,或当它们无法实现时,可以考虑 float / absolute 进行布局。
    如果仍然无法搞定,可以尝试使用 float / absolute 加上 calc() 进行布局。

    使用 float / absolute 可以满足需要,且它们不会出现兼容性问题,是比较合适的解决方案。

  • 相关阅读:
    PAIP: Paradigms of Artificial Intelligence Programming
    Common Lisp第三方库介绍 | (R "think-of-lisper" 'Albertlee)
    悲惨世界
    Lisp: Common Lisp, Racket, Clojure, Emacs Lisp
    Github上四种Lisp方言的流行度 | 肉山博客 (Wenshan's Blog)
    Nginx系列~负载均衡服务器与WWW服务器的实现
    Nginx系列~Nginx服务启动不了
    知方可补不足~数据库名称和数据库别名不同了怎么办
    WebApi系列~通过HttpClient来调用Web Api接口~续~实体参数的传递
    WebApi系列~通过HttpClient来调用Web Api接口
  • 原文地址:https://www.cnblogs.com/libin-1/p/7062003.html
Copyright © 2011-2022 走看看