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

-软萠槑

css实现两栏布局，左侧固定宽，右侧自适应的7种方法，代码如下所示：
1、利用 calc 计算宽度的方法 css代码:

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

复制代码

dom结构:

1. <div class=&quot;box&quot; id=&quot;box1&quot;>    <div class=&quot;left1&quot;>左侧定宽</div>    <div class=&quot;right1&quot;>右侧自适应</div></div>

复制代码

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

1. .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结构:

1. <div class=&quot;box&quot; id=&quot;box2&quot;>    <div class=&quot;left2&quot;>左侧定宽</div>    <div class=&quot;right2&quot;>右侧自适应</div></div>

复制代码

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

1. .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结构:

1. <div class=&quot;box&quot; id=&quot;box3&quot;>    <div class=&quot;left3&quot;>左侧定宽</div>    <div class=&quot;right3&quot;>右侧自适应</div></div>

复制代码

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

1. .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结构:

1. <div class=&quot;box&quot; id=&quot;box4&quot;>    <div class=&quot;left4&quot;>左侧定宽</div>    <div class=&quot;right4&quot;>右侧自适应</div></div>

复制代码

5、利用 position:absolute 实现
css代码:

1. .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结构：

1. <div class=&quot;box&quot; id=&quot;box5&quot;>    <div class=&quot;left5&quot;>左侧定宽</div>    <div class=&quot;right5&quot;>右侧自适应</div></div>

复制代码

6、利用 display: flex 实现
css代码：

1. .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结构：

1. <div class=&quot;box&quot; id=&quot;box6&quot;>    <div class=&quot;left6&quot;>左侧定宽</div>    <div class=&quot;right6&quot;>右侧自适应</div></div>

复制代码

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

1. .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结构：

1. <div class=&quot;box&quot; id=&quot;box7&quot;>    <div class=&quot;left7&quot;>左侧定宽</div>    <div class=&quot;right7&quot;>右侧自适应</div></div>

复制代码

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

来源：http://www.jb51.net/css/784590.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！