如何用CSS实现左侧宽度固定,右侧自适应(两栏布局)?左右固定中间自适应(三栏布局)呢?
在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景。本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用方法以及代码
具体实现效果展示如下:
1.二栏布局-flex弹性布局
<!-- flex弹性布局 -->
<div class="title">flex弹性布局:</div>
<div class="box1">
<div class="left1">左边</div>
<div class="right1">右边</div>
</div>
// flex弹性布局
.box1 {
display: flex;
height: 100px;
background: rgb(241, 210, 210);
padding: 10px;
.left1 {
width: 100px;
height: 100%;
background: yellow;
text-align: center;
line-height: 100px;
}
.right1 {
flex: 1;
background: grey;
text-align: center;
line-height: 100px;
}
}
2.二栏布局-左float右margin-left
<!-- 左float右margin-left -->
<div class="title">双栏布局(左float右margin-left):</div>
<div class="box">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
// 双栏布局(左float右margin-left)
.box {
overflow: hidden;
background: rgb(241, 210, 210);
padding: 10px;
.left {
float: left;
width: 200px;
background-color: gray;
height: 100px;
text-align: center;
line-height: 100px;
}
.right {
margin-left: 210px;
background-color: lightgray;
height: 100px;
text-align: center;
line-height: 100px;
}
}
3.三栏布局-两边使用 float,中间使用 margin
<!-- 三栏布局-两边使用 float,中间使用 margin -->
<div class="title">三栏布局-两边使用 float,中间使用 margin:</div>
<div class="box-float-margin">
<div class="left">三栏左侧</div>
<div class="right">三栏右侧</div>
<div class="center">三栏中间</div>
</div>
// 三栏布局-两边使用 float,中间使用 margin
.box-float-margin {
background: rgb(241, 210, 210);
overflow: hidden;
padding: 10px;
height: 100px;
.left {
width: 200px;
height: 100px;
float: left;
background: rgb(80, 255, 182);
text-align: center;
line-height: 100px;
}
.right {
width: 120px;
height: 100px;
float: right;
background: rgb(173, 130, 130);
text-align: center;
line-height: 100px;
}
.center {
margin-left: 220px;
height: 100px;
background: rgb(255, 223, 182);
margin-right: 140px;
text-align: center;
line-height: 100px;
}
}
4.三栏布局-两边使用 absolute,中间使用 margin
<!-- 三栏布局-两边使用 absolute,中间使用 margin -->
<div class="title">三栏布局-两边使用 absolute,中间使用 margin:</div>
<div class="box-absolute">
<div class="left">左边固定宽度</div>
<div class="right">右边固定宽度</div>
<div class="center">中间自适应</div>
</div>
// 三栏布局-两边使用 absolute,中间使用 margin
.box-absolute {
position: relative;
background: rgb(241, 210, 210);
padding: 10px;
div {
height: 100px;
text-align: center;
line-height: 100px;
}
.left {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
background: rgb(128, 119, 119);
}
.right {
position: absolute;
top: 10px;
right: 10px;
width: 100px;
background: rgb(128, 168, 228);
}
.center {
margin: 0 110px;
background: rgb(126, 102, 143);
color: rgb(255, 255, 255);
}
}
5.三栏布局-flex弹性布局
<!-- 三栏布局-flex弹性布局 -->
<div class="title">三栏布局-flex弹性布局:</div>
<div class="box-flex-three">
<div class="left">左边固定宽度</div>
<div class="center">中间自适应</div>
<div class="right">右边固定宽度</div>
</div>
// 三栏布局-flex弹性布局
.box-flex-three {
display: flex;
justify-content: space-between;
background: rgb(241, 210, 210);
padding: 10px;
div {
text-align: center;
line-height: 100px;
height: 100px;
}
.left {
width: 500px;
background: rgb(165, 163, 162);
}
.right {
width: 300px;
background: rgb(209, 123, 226);
}
.center {
background: rgb(7, 245, 7);
width: 100%;
margin: 0 10px;
}
}
6.三栏布局-grid布局
<!-- 三栏布局-grid布局 -->
<div class="title">三栏布局-grid布局:</div>
<div class="box-grid">
<div class="left">左侧</div>
<div class="center">中间</div>
<div class="right">右侧</div>
</div>
// 三栏布局-grid布局
.box-grid {
display: grid;
width: 100%;
grid-template-columns: 300px auto 250px;
div {
text-align: center;
line-height: 100px;
height: 100px;
}
.left {
background: rgb(80, 255, 95);
}
.right {
width: 250px;
background: rgb(23, 127, 161);
}
.center {
background: rgb(54, 131, 73);
}
}
7.三栏布局-display: table
<!-- 三栏布局-display: table -->
<div class="title">三栏布局-display: table:</div>
<div class="box-table">
<div class="left">左边固定宽度</div>
<div class="center">中间自适应</div>
<div class="right">右边固定宽度</div>
</div>
// display: table
.box-table {
height: 100px;
line-height: 100px;
text-align: center;
display: table;
table-layout: fixed;
width: 100%;
.left,
.right {
width: 300px;
background: rgb(228, 20, 183);
display: table-cell;
}
.center {
background: rgb(18, 240, 118);
color: white;
width: 100%;
display: table-cell;
}
}
如何用CSS实现左侧宽度固定,右侧自适应(两栏布局)?左右固定中间自适应(三栏布局)呢?的更多相关文章
- [转]css实现左侧宽度自适应,右侧固定宽度
原文地址:https://segmentfault.com/a/1190000008411418 页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应.总之就是一边固定宽度 ...
- css实现左侧固定宽度,右侧宽度自适应
#centerDIV { height: 550px; width: 100%; } #mainDIV { height: 100%; border: 1px solid #F00; margin-l ...
- CSS布局:Float布局过程与老生常谈的三栏布局
原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...
- 转:CSS布局:Float布局过程与老生常谈的三栏布局
使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- 【CSS】三栏/两栏宽高自适应布局大全
页面布局 注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何 三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案 方案一: float (左右浮动,中间不用给宽,设置 ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- 前端一面/面试常考题1-页面布局:假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为300px,中间自适应。
题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. [题外话:日常宣读我的目标===想要成为一名优雅的程序媛] 一.分析 1. 题目真的像我们想得这么简单吗? 其实不然 ...
- css常见的各种布局下----三列布局
css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...
随机推荐
- Net中事件的用法之二
1.委托与事件的区别 事件对权限做了控制 1.委托可以直接调用 事件不可以直接调用 2.委托允许外面直接赋值 事件不允许外面直接赋值 2.事件与委托的实例比较 using System; using ...
- CentOS7.5环境下安装配置GitLab
1. 安装依赖软件 yum -y install policycoreutils openssh-server openssh-clients postfix 2.设置postfix开机自启,并启动, ...
- 017tcpflow的简单用法
tcpflow tcpflow是服务器上经常使用的一个小程序,它能够捕获tcp的数据流,并将其存储为方便分析和调试的格式.每一条tcp流都会被存储到独立的文件中,因此,典型的tcp流将会被分别存储为进 ...
- 分布式锁用Redis与Zookeeper的使用
为什么用分布式锁? 在讨论这个问题之前,我们先来看一个业务场景: 系统A是一个电商系统,目前是一台机器部署,系统中有一个用户下订单的接口,但是用户下订单之前一定要去检查一下库存,确保库存足够了才会 ...
- Nginx--sub_filter模块
客户端浏览器访问替换html中的字符: location / { root /web/htdocs; random_index on; index index.html index.htm; subs ...
- java对xml文件的操作
xml文件格式(示例): <?xml version="1.0" encoding="UTF-8"?> <root> <Funct ...
- DDOS攻击应用
0x01 环境 包含3台主机 attact 作为攻击方,使用Centos7.2,安装slowhttptest server 作为被攻击服务器,安装有apached windows,用于访问 serve ...
- 使用C#语言,如何实现EPLAN二次开发 Api插件及菜单展示
上期我们谈谈了谈EPLAN电气制图二次开发,制图软件EPLAN的安装和破解,今天我们来说说使用C#语言,如何实现Api插件及菜单,今天它来了!!! 关于项目环境的搭建请参考:https://blog. ...
- MySQL—分页查询
分页查询 应用场景:当要显示的数据,当一页显示不全,有很多的数据时,就需要分页提交sql请求 语法:select 查询列表 from表名 [ join type join 表2 on连接条件 whe ...
- CLion入门教程
1. 说点什么 以下我将介绍地表最强(可能是之一,别打我) C/C++ 开发 IDE--CLion,以及如何使用它来快乐刷题. 工欲善其事,必先利其器.一个好的编程工具对写代码或是做题来说格外重要,尤 ...