CSS 常见布局左右
CSS 常见布局左右
CSS 常见布局左右
左边固定宽度,右边自适应

浮动和margin-left

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    /* 浮动 和 margin-left*/
    .container {
        height: 100px;
    }
    .left {
        width: 200px;
        height: 100px;
        background: #ff6b81;
        float: left;
    }
    .right {
        /*width: auto;*/
        height: 100px;
        background: #c0c0c0;
        margin-left: 200px;
    }
</style>
<div class="container">
    <div class="left">box-left</div>
    <div class="right">box-right</div>
</div>

flex布局放大缩小flex: auto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
    /* flex 布局 */
    .container {
        height: 100px;
        display: flex;
    }
    .left {
        background: #ff6b81;
        /*flex-shrink: 0;*/
        /*flex-grow: 0;*/
        flex-basis: 200px;
    }
    .right {
        background: #c0c0c0;
        flex: auto;
    }
</style>
<div class="container">
    <div class="left">box-left</div>
    <div class="right">box-right</div>
</div>

左边绝对定位absolute 和’margin-left’

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    /* 左边绝对定位 */
    .container {
        height: 100px;
        position: relative;
    }
    .left {
        width: 200px;
        height: 100px;
        background: #ff6b81;
        position: absolute;
    }
    .right {
        height: 100px;
        background: #c0c0c0;
        margin-left: 200px;
    }
</style>
<div class="container">
    <div class="left">box-left</div>
    <div class="right">box-right</div>
</div>

右边绝对定位absolute 和’left’

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
    /* 右边绝对定位 */
    .container {
        height: 100px;
        position: relative;
    }
    .left {
        width: 200px;
        height: 100px;
        background: #ff6b81;
    }
    .right {
        height: 100px;
        background: #c0c0c0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 200px;
    }
</style>
<div class="container">
    <div class="left">box-left</div>
    <div class="right">box-right</div>
</div>