css常见双栏和三栏布局
左侧固定右侧自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>左侧固定右侧自适应</title>
</head>
<style>
/*方法1*/
/* 1、将左侧div浮动，右侧div设置margin-left */
.outer {
overflow: hidden;
border: 1px solid red;
}
.sidebar {
float: left;
width: 200px;
height: 150px;
background: #BCE8F1;
}
.content {
margin-left: 200px;
height: 100px;
background: #F0AD4E;
}
/*方法2*/
/* 2、固定区采用绝对定位，自适应区设置margin */
.outer2 {
position: relative;
height: 150px;
border: 1px solid red;
}
.sidebar2 {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 100%;
background: #BCE8F1;
}
.content2 {
margin-left: 200px;
height: 100px;
background: #F0AD4E;
}
/*方法3*/
/* table布局 */
.outer3 {
display: table;
width: 100%;
border: 1px solid red;
}
.sidebar3 {
display: table-cell;
width: 200px;
height: 150px;
background: #BCE8F1;
}
.content3 {
display: table-cell;
height: 100px;
background: #F0AD4E;
}
/*方法4*/
/* 双float + calc()计算属性 */
.outer4 {
overflow: hidden;
border: 1px solid red;
}
.sidebar4 {
float: left;
width: 200px;
height: 150px;
background: #BCE8F1;
}
.content4 {
float: left;
width: calc(100% - 200px);
height: 100px;
background: #F0AD4E;
}
/*方法5*/
/* float + BFC方法 */
.outer6 {
overflow: auto;
border: 1px solid red;
}
.sidebar6 {
float: left;
width: 200px;
height: 150px;
background: #BCE8F1;
}
.content6 {
overflow: auto;
height: 100px;
background: #F0AD4E;
}
/*方法6*/
/* flex */
.outer7 {
display: flex;
border: 1px solid red;
}
.sidebar7 {
flex: 0 0 200px;
/* width: 200px; */
height: 150px;
background: #BCE8F1;
}
.content7 {
flex: 1;
height: 100px;
background: #F0AD4E;
}
</style>
<body>
<div class="outer6">
<div class="sidebar6">固定宽度区(sideBar)</div>
<div class="content6">自适应区(content)</div>
</div>
<div class="footer">footer</div>
</body>
</html>
三栏布局左右固定宽度中间自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三栏布局左右固定宽度中间自适应</title>
<style>
*{
margin: 0;
padding: 0;
}
.layout article div{
min-height: 100px;
}
</style>
</head>
<body>
<section class="layout layout1">
<style>
.layout1 .left{
float: left;
width: 300px;
background-color:red;
}
.layout1 .right{
float: right;
width: 300px;
background-color:blue;
}
.layout1 .center{
background-color: yellow;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
1、这是三栏布局中间部分
1、这是三栏布局中间部分
<br>缺点：需要清除浮动
<br>优点：兼容性好
</div>
</article>
</section>
<section class="layout layout2">
<style>
.layout2 .left-center-right>div{
margin-top: 20px;
position: absolute;
}
.layout2 .left{
left: 0;
width: 300px;
background-color: red;
}
.layout2 .center{
left: 300px;
right: 300px;
background-color: yellow;
}
.layout2 .right{
right: 0;
width: 300px;
background-color: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>绝对定位解决方案</h2>
1、这是三栏布局中间部分
1、这是三栏布局中间部分
<br>缺点：脱离文档流
<br>优点：快捷
</div>
<div class="right"></div>
</article>
</section>
<section class="layout layout3">
<style>
.layout3 .left-center-right{
display: flex;
margin-top: 200px;
}
.layout3 .left{
width: 300px;
background-color: red;
}
.layout3 .center{
flex:1;
background-color: yellow;
}
.layout3 .right{
width: 300px;
background-color: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>flexbox解决方案</h2>
1、这是三栏布局中间部分
1、这是三栏布局中间部分
<br>完美
</div>
<div class="right"></div>
</article>
</section>
<section class="layout layout4">
<style>
.layout4 .left-center-right{
width: 100%;
display: table;
height: 100px;
margin-top: 50px;
}
.layout4 .left-center-right>div{
display: table-cell;
}
.layout4 .left{
width: 300px;
background-color: red;
}
.layout4 .center{
background-color: yellow;
}
.layout4 .right{
width: 300px;
background-color: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>表格布局解决方案</h2>
1、这是三栏布局中间部分
1、这是三栏布局中间部分
<br>兼容性好
<br>缺点：高度跟着变
</div>
<div class="right"></div>
</article>
</section>
去掉高度已知哪个不适用：
flex和table能用，会自动撑开
</body>
</html>
css常见双栏和三栏布局的更多相关文章
- ccs之经典布局（二）（两栏，三栏布局）
接上篇ccs之经典布局(一)(水平垂直居中) 四.两列布局 单列宽度固定,另一列宽度是自适应. 1.float+overflow:auto; 固定端用float进行浮动,自适应的用overflow:a ...
- css常见布局方式
CSS常见布局方式 以下总结一下CSS中常见的布局方式.本人才疏学浅,如有错误,请留言指出. 如需转载,请注明出处:CSS常见布局方式 目录: 使用BFC隐藏属性 float + margin abs ...
- HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化
第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...
- 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...
- CSS实现三栏布局(5种)
常见的布局方式: float布局.Position定位.table布局.弹性(flex)布局.网格(grid)布局 那么我们就是用以上5种方式完成三栏布局,不过前提是左右宽度(假如左右宽度为300px ...
- 从三栏自适应宽度布局到css布局的讨论
如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- CSS布局：Float布局过程与老生常谈的三栏布局
原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...
- 转：CSS布局：Float布局过程与老生常谈的三栏布局
使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...
随机推荐
- E:only-child
E:only-child 语法: E:only-child { sRules } 说明: 匹配父元素仅有的一个子元素E.大理石机械构件维修 要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高 ...
- 014_linux驱动之_信号符号名、描述和它们的信号值
符号名 信号值 描述 是否符合POSIX SIGHUP 1 在控制终端上检测到挂断或控制线程死 亡 是 SIGINT 2 交互注意信号 是 SIGQUIT 3 交 互中止信号 是 SIGILL 4 检 ...
- Material icons 全图标一览
Material icons 全图标一览 2018年12月17日 16:52:55 boywcx 阅读数 3090 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog. ...
- update更新操作的URL地址
http://localhost:8080/updateById/110?name=诸葛亮&age=3
- umeditor实现ctrl+v粘贴word图片并上传
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM ...
- idea快捷方式2
IntelliJ Idea 常用快捷键列表 Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Sh ...
- Vue2 响应式原理
我们经常用vue的双向绑定,改变data的某个属性值,vue就马上帮我们自动更新视图,下面我们看看原理. Object的响应式原理: 可以看到,其实核心就是把object的所有属性都加上getter. ...
- redis详解之cluster模式部署
一.环境说明 1.Operation OS:CentOS7.22.ruby version >= 2.2.23.openssl zlib gcc>=4.8.5 二.开始部署 1.安装rub ...
- Ajax简单异步上传图片并回显
前台代码 上传图片按钮 <a href="javascript:void(0)" onclick="uploadPhoto()">选择图片</ ...
- RGB-D（深度图像） & 图像深度
RGB-D(深度图像) 深度图像 = 普通的RGB三通道彩色图像 + Depth Map 在3D计算机图形中,Depth Map(深度图)是包含与视点的场景对象的表面的距离有关的信息的图像或图 ...