CSS如何实现三列布局?如果两端固定、中间是自适应又该如何做?
- 使用浮动布局来实现
- 左侧元素与右侧元素优先渲染,分别向左和向右浮动
- 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动压到左右两个浮动元素的下面,随后在中间元素中再添加一个div元素并给其设置 margin 左右边距分别为左右两列的宽度,就可以将新元素调整到正确的位置。
html部分:
<div class="container">
<div class="left">this is left</div>
<div class="right">this is right</div>
<div class="center">
<div class="middle">
this is center
</div>
</div>
</div>
css部分:
.container {
width: 100%;
height: 100%;
overflow: hidden;
}
.left {
float: left;
width: 400px;
height: 800px;
background-color: black;
}
.center {
width: 100%;
height: 1000px;
background-color: yellow;
}
.middle {
background-color: #fff;
margin: 0 400px;
height: 850px;
}
.right {
float: right;
width: 400px;
height: 800px;
background-color: red;
}
- 试试利用 BFC
- 同样的左右两列元素优先渲染,并分别左右浮动。
- 接下来将中间元素设置 overflow: hidden; 成为 BFC 元素块,不与两侧浮动元素叠加,自然能够插入自己的位置。
html部分:
<div class="container">
<div class="left">this is left</div>
<div class="right">this is right</div>
<div class="center">
this is center
</div>
</div>
css部分:
.container {
width: 100%;
height: 100%;
overflow: hidden;
}
.left {
float: left;
width: 400px;
height: 800px;
background-color: black;
}
.center {
overflow: hidden;
height: 1000px;
background-color: yellow;
}
.right {
float: right;
width: 400px;
height: 800px;
background-color: red;
}
- 通过左右元素设置定位,中间元素设置 width: auto; 来实现
html部分:
<div class="container">
<div class="left">this is left</div>
<div class="center">
this is center
</div>
<div class="right">this is right</div>
</div>
css部分:
.container {
width: 100%;
height: 100%;
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 800px;
background-color: black;
}
.center {
/* 如果没有这一句,那么,center这个div的文字就不会自动换行 */
width: auto;
margin: 0 400px;
height: 1000px;
background-color: yellow;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 900px;
background-color: red;
}
- 双飞翼布局
主要利用了浮动、负边距、相对定位三个布局属性,使三列布局就像小鸟一样,拥有中间的身体和两侧的翅膀。
html部分:
<div class="grid">
<div id="div-middle-02">
<div id="middle-wrap-02"><span>div-middle</span></div>
</div>
<div id="div-left-02"><span>div-left</span></div>
<div id="div-right-02"><span>div-right</span></div>
</div>
css部分:
#div-middle-02 {
float: left;
background-color: #fff9ca;
width: 100%;
height: 80px;
}
#div-left-02 {
float: left;
background-color: red;
width: 150px;
/* 重点看这里 */
margin-left: -100%;
height: 50px;
} #div-right-02 {
float: left;
background-color: yellow;
width: 200px;
/* 重点看这里 */
margin-left: -200px;
height: 50px;
}
#middle-wrap-02 {
margin: 0 200px 0 150px;
background-color: pink;
}
CSS如何实现三列布局?如果两端固定、中间是自适应又该如何做?的更多相关文章
- css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- css布局--两列布局,左侧固定,右侧自适应(其中左侧要可以拖动,右侧水平滚动条)
(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
- HTML/CSS学习之 三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化
第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...
- CSS 实现:两栏布局(一边固定,一边自适应)
☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <d ...
- css之页面三列布局
左右两边宽度固定,中间自适应 第一种方法:左右两边绝对定位 html代码 <div class="left"></div> <div class=&q ...
- css之页面三列布局之左右两边宽度固定,中间自适应
左右两边宽度固定,中间自适应 左右两边绝对定位 可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814. ...
- css之页面三列布局之左右上下高度固定,中间自适应
第一种,绝对定位 !DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <tit ...
- 记一道css面试题 : 三栏布局两边宽度固定,中间宽度自适应,并且布局随屏幕大小改变。
前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...
- CSS设计一个三列布局的页面
探讨这种布局是因为最近对话框组件以及信息系统B/S界面布局的需要.无论是什么,我们在写CSS之前首先引入reset.css,我使用的是淘宝的reset. 01 /* 02 KISSY CSS Rese ...
随机推荐
- 「CF1051F」The Shortest Statement
传送门 Luogu 解题思路 注意到 \(m - n \le 20\) ,所以这其实是一个树上问题,非树边至多只有21条,那么我们就可以暴力地对每一个非树边所连接的点求一次单源最短路,然后每次询问时, ...
- 《JavaScript高级程序设计》读书笔记(四)变量、作用域和内存问题
内容---理解基本类型和引用类型的值---理解执行环境---理解垃圾收集 --JavaScript变量松散类型的本质--决定了它只是在特定时间用于保存特定值的一个名字而已--变量的值及其数据类型可以在 ...
- JIT对锁的优化- 锁消除和锁粗化案例分析
锁消除和锁粗化案例分析 锁消除 直接上代码 /** * 描述: 锁粒度演示 * @author karl * @create 2020-02-11 14:38 */ public class MySy ...
- 【笔记4-商品模块】从0开始 独立完成企业级Java电商网站开发(服务端)
分类管理模块 数据表结构设计 分类表 CREATE TABLE.mmall_ category' ( 'id' int(11) NOT NULL AUTO_ INCREMENT COMMENT ' 类 ...
- DOC文档与DOCX文档有什么区别
doc 是 Microsoft Office 2003 里的 Word 文档,而 docx 是 Microsoft Office 2007 里的 Word 文档.高版本是向下兼容的,也就是能够打开 d ...
- 服务器(1)——IIS(1)——Windows7中IIS简单安装与配置(详细图解)
最近工作需要IIS,自己的电脑又是Windows7系统,找了下安装的方法,已经安装成功. 一.首先是安装IIS.打开控制面板,找到“程序与功能”,点进去 二.点击左侧“打开或关闭Windows功能” ...
- 水平居中显示CSS
HTML代码部分 <div class="center" > <img style="margin:0 auto ;" :src=item.i ...
- 阿里云服务器安装nginx(ubantu16.04)
下载安装包 sudo wget http://nginx.org/download/nginx-1.15.5.tar.gz 解压缩 tar zxvf nginx-1.15.5.tar.gz 打开目录 ...
- Centos7虚拟环境virtualenv与virtualenvwrapper的安装及基本使用
一.使用虚拟环境的原因 在使用 Python 开发的过程中,工程一多,难免会碰到不同的工程依赖不同版本的库的问题:亦或者是在开发过程中不想让物理环境里充斥各种各样的库,引发未来的依赖灾难.此时,我们需 ...
- 设计模式课程 设计模式精讲 3-3 开闭原则 coding
1 课程讲解 1.1 开闭原则定义 1.2 不重要内容 2 代码coding 2.1 基类 2.2 需求:打印出原价和折扣后的价格.(接口不应该随意变化,面向接口编程) 1 课程讲解 1.1 开闭原则 ...