两列布局(左侧固定长度,右侧自适应)的几种方法

1.display:table,这种情况下两列等高,以较高的高度为准.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
      .parent{
            display:table ;
            width:100%;
        }
      .child1{
            width:300px;
            height:100px;
            display:table-cell;
            background-color:red;
        }
       .child2{
            height:200px;
            
            background-color:black;
        }
            </style>
 </head>
<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>
</body>
</html>

2.display:flex.或者是display:box;实际使用时注意兼容性.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
      .parent{
            display: flex;
            width:100%;
        }
      .child1{
            width:100px;
            height:100px;
            background-color:red;
        }
       .child2{
            height:200px;
             flex:1;
            background-color:black;
        }
            </style>
            </head>
<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>
</body>
</html>

3.浮动.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
      .parent{
            width:100%;
        }
      .child1{
            width:100px;
            height:100px;
             float:left;
            background-color:red;
        }
       .child2{
            height:200px;
           margin-left:100px;
            background-color:black;
        }
            </style>
            </head>
<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>
</body>
</html>

4.绝对定位.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
      .parent{
            width:100%;
        }
      .child1{
            width:100px;
            height:100px;
             position:absolute;
            background-color:red;
        }
       .child2{
            height:200px;
              background-color:black;
				margin-left:100px;
        }
            </style>
            </head>
<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>
</body>
</html>

5.calc(),同时要设置diplay:inline-block,(MB的在写的时候因为基准线的问题,会发现在两列不等高时的其他状况还要在设置vertical-align:top),它可以通过加减乘除(运算符号前后都要有空格)进行即使是不同单位(包括% ,px,em,rem)的长度计算,比如calc(100% – (10px + 5px) * 2)
同样需要注意不同浏览器兼容性写法,加前缀.在写的时候发现设置display:inline-block,之间会留有1像素空格.
在父元素里添加         {font-size: 0;
-webkit-text-size-adjust:none;}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        *{
            margin:0;
            padding:0;
        }
        .parent{
            width:100%;
            font-size: 0;
            -webkit-text-size-adjust:none;
        }
        .child1{
            width:400px;
            height:150px;
            display:inline-block;
            background-color:red;
            vertical-align: top;

        }
        .child2{
            height:100px;
            display:inline-block;
            background-color:black;
            width:calc(100% - 400px);
            vertical-align: top;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 两列布局(左侧固定长度,右侧自适应)的几种方法

赞 (2)
分享到:更多 ()

发表评论 0