两列布局(一列定宽）

2024年3月16日 108次阅读 来源: zhouzhou

左列定宽

float +margin

<style>
    .parent {
         background-color: grey;
         width: 300px;
         height: 200px;
     }
     .left {
         float: left;
         width: 100px;      //需要定宽
         height: 100%;
         background-color: skyblue;
     }
    .right {
         margin-left: 110px;
         background-color: greenyellow;
     }
</style>
<html>
    <div class="parent">
        <div class="left">
             <p>left</p>
        </div>
        <div class="right">
             <p>right</p>
             <p>right</p>
        </div>
    </div>
</html>

absolute + margin

.parent{
        position: relative;
    }

    .side{
         position:absolute;
        width:300px;
        top:0px;
        left:0px;
        background:#F00;
    }

    .main{
        background:#0FC;
        margin-left:300px;
    }

margin-left 负值 + float

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <!-- html部分在这个地方进行了添加，使用right-fix把原有结构包裹住了 -->
    <div class="right-fix">
        <div class="right">
            <p >right</p>
            <p>right</p>
        </div>
    </div>
</div>

.left{
    float: left; width: 100px;
    position: relative; 
}
.right-fix{
    float: right; width: 100%;
    margin-left: -100px;
}
.right{
    margin-left: 120px;
}

BFC

<style>
    .parent {
         background-color: grey;
         width: 300px;
         height: 200px;
     }
     .left {
         float: left;
         width: 100px;      //需要定宽
         height: 100%;
         margin-right: 10px;
         background-color: skyblue;
     }
    .right {
         height: 100%;
        background: #0FC;
        overflow: hidden;
        padding: 20px;
        box-sizing: border-box;
     }
</style>
<html>
    <div class="parent">
        <div class="left">
             <p>left</p>
        </div>
        <div class="right">
             <p>right</p>
             <p>right</p>
        </div>
    </div>
</html>

table 父元素定宽高

//第一种，同时可以实现等高布局
<style>
    .parent {
        background-color: grey;
        width: 300px;   
        height: 200px;
        display: table;
        table-layout: fixed;
    }
    .left {
        display: table-cell;
        width: 100px;
        background-color: skyblue;

        border-right: 10px solid transparent;
        background-clip: padding-box;   //设置列之间的间距
    }
    .right {
        display: table-cell;
        background-color: greenyellow;
    }
</style>
<html>
    <div class="parent">
        <div class="left">
             <p>left</p>
        </div>
        <div class="right">
             <p>right</p>
             <p>right</p>
        </div>
    </div>
</html>

//第二种方法
<style>
    .parent {
        background-color: grey;
        width: 300px;
        height: 200px;
        display: table;
        table-layout: fixed;
    }
    .left-container {
        display: table-cell;
        width: 100px;
    }
    .left {
        margin-right: 10px;
        background-color: skyblue;
    }
    .right {
        display: table-cell;
        background-color: greenyellow;
    }
</style>
<html>
    <div class="parent">
        <div class="left-container">
             <div class="left">
                 <p>left</p>
             </div>
        </div>
        <div class="right">
             <p>right</p>
             <p>right</p>
        </div>
    </div>
</html>

flex

<div class="parent">
     <div class="side"></div>
     <div class="main"></div>
</div>

.parent{
    display: flex;
}

.side{
    width: 200px;
    height: 200px;
    margin-right: 10px;
    background: #555;
}

.main{
    flex: 1;
    background: #ddd;
}
    原文作者：zhouzhou
    原文地址: https://segmentfault.com/a/1190000018826480
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞