页面架构——多列布局_两列布局

两列布局

一列定宽,一列自适应

使用float+margin
        .left{
            float: left;
            width: 100px;
        }
        .right{
            margin-left: 120px;
        }
<div class="parent">
        <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

缺点:IE6不兼容 会出现bug
改正:


使用float+overflow
<style>
        .left{
            float: left;
            width: 100px;
        }
        .right{
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="parent">
    

    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>
</body>
使用table
<style>
        .parent{
            display: table;
            width: 100%;
                table-layout:fixed;
        }
        .left,.right{
            display: table-cell;
        }
        .left{
            width: 100px;
        }
    </style>
</head>
<body>
<div class="parent">
    

    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>
</body>

注:table-layout 布局优先

使用flex
<style>
        .parent{
            display: flex;
        }
        .left{
            width: 100px;
            margin-right: 20px;
        }
        .right{
            flex: 1;
        }
    </style>
</head>
<body>
<div class="parent">
    

    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>
</body>

一列不定宽,一列自适应

除了float+margin不行之外,其他都可以,因为它需要修该right的值。

推荐阅读更多精彩内容