css实现两栏布局，左侧固定宽，右侧自适应的多种方法

发布时间：2021-08-04 14:32:21 作者：小萌在线敲打

今天通过7种方法给大家介绍css实现两栏布局，左侧固定宽，右侧自适应效果，每种方法通过实例代码给大家介绍的非常详细，需要的朋友参考下吧

css实现两栏布局，左侧固定宽，右侧自适应的7种方法，代码如下所示：

1、利用 calc 计算宽度的方法 css代码:

.box>div{height: 100%;}
#box1>div{float: left;}
.left1{width: 100px;background: yellow;}
.right1{background: #09c;width:calc(100% - 100px);}

dom结构:

<div class="box" id="box1">
    <div class="left1">左侧定宽</div>
    <div class="right1">右侧自适应</div>
</div>

2、利用 float 配合 margin 实现 css代码:

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
.left2{float: left;background: yellow;width: 100px;}
.right2{background: #09c;margin-left: 100px;}

dom结构:

<div class="box" id="box2">
    <div class="left2">左侧定宽</div>
    <div class="right2">右侧自适应</div>
</div>

3、利用 float 配合 overflow 实现 css代码:

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
.left3{float: left;background: yellow;width: 100px;}
.right3{background: #09c;overflow: hidden;}

dom结构:

<div class="box" id="box3">
    <div class="left3">左侧定宽</div>
    <div class="right3">右侧自适应</div>
</div>

4、利用 position:absolute 配合 margin 实现

css代码:

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box4{position: relative;}
.left4{position: absolute;left: 0;top:0;width: 100px;background: yellow;}
.right4{margin-left:100px;background: #09c;}

dom结构:

<div class="box" id="box4">
    <div class="left4">左侧定宽</div>
    <div class="right4">右侧自适应</div>
</div>

5、利用 position:absolute 实现

css代码:

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box5{position: relative;}
.left5{position: absolute;left: 0;top:0;width: 100px;background: yellow;}
.right5{position: absolute;left: 100px;top:0;right: 0;width: 100%;background: #09c;}

dom结构：

<div class="box" id="box5">
    <div class="left5">左侧定宽</div>
    <div class="right5">右侧自适应</div>
</div>

6、利用 display: flex 实现

css代码：

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box6{display: flex;display: -webkit-flex;}
.left6{flex:0 1 100px;background: yellow;}
.right6{flex:1;background: #09c;}

dom结构：

<div class="box" id="box6">
    <div class="left6">左侧定宽</div>
    <div class="right6">右侧自适应</div>
</div>

7、利用 display: table 实现 css代码：

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box7{display: table;width: 100%;}
#box7>div{display: table-cell;}
.left7{width: 100px;background: yellow;}
.right7{background: #09c;}

dom结构：

<div class="box" id="box7">
    <div class="left7">左侧定宽</div>
    <div class="right7">右侧自适应</div>
</div>

到此这篇关于css实现两栏布局，左侧固定宽，右侧自适应的7中方法的文章就介绍到这了,更多相关css两栏布局内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！

Tag：css 两栏布局自适应

css display table 自适应高度、宽度问题的解决
这篇文章主要介绍了css display table 自适应高度、宽度问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着
2021-05-07
详解CSS多种三列自适应布局实现
这篇文章主要介绍了详解CSS多种三列自适应布局实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习
2021-02-24
CSS实现背景图片屏幕自适应的实现
这篇文章主要介绍了CSS实现背景图片屏幕自适应的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学
2020-12-07
css3实现自适应浏览器图片布局特效
css3实现自适应浏览器图片布局特效是一款自适应浏览器屏幕的水平列表div容器，好友头像列表水平布局特效。
2020-11-23
CSS实现表格首行首列固定和自适应窗口的实例代码
这篇文章主要介绍了CSS实现表格首行首列固定和自适应窗口的实例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-11-11
css实现六种自适应两栏布局方式
这篇文章主要介绍了css实现六种自适应两栏布局方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习
2020-10-28
CSS将img图片填满父容器div并自适应容器大小
这篇文章主要介绍了CSS将img图片填满父容器div并自适应容器大小,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编
2020-10-23