首页 > 作文

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

更新时间:2023-04-03 21:53:37 阅读: 评论:0

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="righ齐国皇帝t4">右侧自适应</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两栏布局内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章,希望大家以后多多支持www.887551.com!

本文发布于:2023-04-03 21:53:36,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/d6c9fc8c3dcf61156de49f7e6eb4b039.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:css实现两栏布局,左侧固定宽,右侧自适应的多种方法.doc

本文 PDF 下载地址:css实现两栏布局,左侧固定宽,右侧自适应的多种方法.pdf

标签:自适应   代码   结构   布局
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图