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属性布局.前者适合布局首页,因为 ...
随机推荐
- final详解
final的含义? final:java中的关键字,意为“终态的”或者“无法改变的”.可用来修饰类.变量.方法. 变量(成员变量.静态变量.局部变量) 注意: 1.final变量即为常量,通常常量名大 ...
- Enum 类型
枚举类型(Enumerated Type) 什么是枚举? 枚举是一个被命名的整型常数的集合.在多种编程语言中都有使用(C/C++/c#/java等). 示例 public enum Size { S, ...
- 题解 [JOI 2019 Final] 独特的城市
题面 解析 首先有一个结论, 对一个点\(x\)有贡献的城市 肯定在它到离它较远的直径的端点的链上. 假设离它较远的端点是\(S\), 如果有一个点\(u\)不在\(x\)到\(S\)的链上, 却对\ ...
- House Lawn Kattis - houselawn
Problem You have just bought a new house, and it has a huge, beautiful lawn. A lawn that needs cutti ...
- Rand工具类
这篇文章已经废弃. 实际开发中,这个工具类用到得非常少. RandN是主要类,用于生成指定位数的随机字符串,具体功能在这个类中实现 Rand8是修饰了RandN中每个对外方法的修饰类,用与生成8位的随 ...
- shell 显示详细信息
MacdeMacBook-Pro:test macname$ ls -al | more total drwxr-xr-x macname staff : . drwxr-xr-x+ macname ...
- JavaWeb_(SpringMVC框架)SpringMVC&Spring&MyBatis整合
JavaWeb_(SpringMVC框架)测试SpringMVC&Spring&MyBatis三大整合 传送门 1.整合ssm 3大框架 过程 a)导包 -> spring_Ja ...
- H264基础简介
前言 H264是属于视频的编码层的标准格式,视频编码显然是为了压缩大小.我们看下一个完全没压缩的视频数据大小.假设视频是高清(1280 * 720),每秒30帧,也就是每秒的数据 1280 * 720 ...
- MapReduce shuffle的过程分析
shuffle阶段其实就是多个map任务的输出,按照不同的分区,通过网络copy到不同的reduce节点上. Map端: 1.在map端首先接触的是InputSplit,在InputSplit中含有D ...
- Python 自学笔记（五）
1.布尔值 1-1.概念 定义计算机中的逻辑判断,只有两种结果,True和False. if,while后面的判断条件就是布尔值,只有条件为True的时候才执行. 1-2.数值比较 1-3.数值运算 ...