CSS 两栏布局

news2024/10/7 6:30:10

CSS两栏布局（左列定宽，右列自适应宽）

方法一：浮动+margin

方法二：定位+margin

方法三：浮动+BFC

方法四：Flex布局

方法五：able布局

CSS两栏布局（左列不定宽，右列自适应宽）

CSS两栏布局（左列定宽，右列自适应宽）

方法一：浮动+margin

<div class="container">
	<div class="left">定宽</div>
	<div class="right">自适应</div>
</div>


<style>

/* 不给高度不行，不给宽度可以自适应 */
.container {
    height: 300px;
}
.left {
    float: left;
    /* 定宽 */
    width: 200px;
    height: 100%;
    background-color:chartreuse;
}

.right {
    /* 不设置宽度自适应 */
    height: 100%;
    background-color:coral;
    margin-left: 200px;
}


</style>

方法二：定位+margin

html不变

/* 不给高度不行，不给宽度可以自适应 */
.container {
    position: relative;
    height: 300px;
}
.left {
    position: absolute;
    left: 0;
    /* 定宽 */
    width: 200px;
    height: 100%;
    background-color:chartreuse;
}

.right {
    /* 不设置宽度自适应 */
    height: 100%;
    
    /* 方法一：margin-left: 200px(只设置边距也可以实现) */
    /* 方法二：定位*/
    position:absolute;
    left: 200px;
    right: 0;  /*不设置这个，宽度会缩在一起，不自适应展开*/

    background-color:coral;
}

方法三：浮动+BFC

.container {
    height: 300px;
}
.left {
    float: left;
    /* 定宽 */
    width: 200px;
    height: 100%;
    background-color: chartreuse;
}
.right {
    /* 不设置宽度自适应 */
    height: 100%;
    overflow: hidden;  /*触发BFC条件*/
    background-color: coral;
}

原理：给正常元素添加BFC属性，正常元素就不会被遮挡，且环绕浮动元素排开。

以上脱离文档流的方式(如浮动、定位)，他们的大体思路都是: 先让左定宽元素脱离文档流，这样可以右列正常能够与左列脱离文档流的元素“站成一排”，此时左列元素还覆盖着右列元素，最后，我们只需要调整一下右列元素的外边距啊、定位啊什么的就可以完成

方法四：Flex布局

.container {
	display: flex;
	height: 300px;
}
.left {
    /* 定宽 */
    width: 200px;
    /*height: 100% 因为未脱离文档流，所以不用设置高度也行*/
    background-color: chartreuse;
}
.right {
    /* flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。 */
    flex: 1;
    /*height: 100% 因为未脱离文档流，所以不用设置高度也行*/
    background-color:coral;
}

方法五：able布局

/* table布局：(display:table-cell后)子级容器默认是自动平分宽度沾满父级容器； */
.container {
    display: table;
    height: 300px;
    width: 100%;
}
.left {
    display: table-cell;
    /* 定宽 */
    width: 200px;
    /*height: 100% 因为未脱离文档流，所以不用设置高度也行*/
    background-color: chartreuse;
}
.right {
    /*height: 100% 因为未脱离文档流，所以不用设置高度也行*/
    display: table-cell;
    background-color: coral;
}