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属性布局.前者适合布局首页,因为 ...
随机推荐
- sql时间加减
/时间转成年月日时分秒select date_format(now(),'%Y%m%d%H%i%S')//时间转成年月日select date_format(now(),'%Y%m%d')//去年此时 ...
- session.getdefaultinstance和getinstance的区别
如果想要同时使用两个帐号发送javamail,比如使用1@a.com发送1#邮件,使用2@a.com发送2#邮件,这时候,你就需要同时创建两个java.mail.Session对象.但是如果你仍然使用 ...
- Noip2014 提高组 Day1 T1 生活大爆炸版石头剪刀布 + Day2 T1 无线网络发射器选址
Day1 T1 题目描述 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一样,则不分胜负.在<生活大爆炸>第二季第8 集中出现了一种石头剪刀布的升级版游戏. 升 ...
- Irrlicht引擎剖析一
代码风格: 1.接口以I开头,实现以C开头,保存数据的结构体以S开头 2.函数名以小写字母开头,变量以大字母开头 3.接口的公共函数,其参数大部分给了默认值 4.采用名字空间 名字空间i ...
- Hdu 5344
Hdu5344 题意: 给你一个数组,求所有的 $ a_i + a_j $ 的异或值. 解法: 因为 $ (a_i+a_j) \bigoplus (a_j + a_i) = 0$ . 所以答案就是 $ ...
- mysql启动关闭脚本
#!/bin/sh mysql_port= mysql_username="root" mysql_password="" function_start_mys ...
- Apache Flink - 命令
$flink命令位置 命令 选项 jar包位置 \ --input 输入文件位置 --out 输出文件位置 ./bin/flink run ./examples/batch/WordCount.jar ...
- java并发编程--第一章并发编程的挑战
一.java并发编程的挑战 并发编程需要注意的问题: 并发编程的目的是让程序运行的更快,然而并不是启动更多的线程就能让程序最大限度的并发执行.若希望通过多线程并发让程序执行的更快,会受到如下问题的挑战 ...
- C++内容记录
仅个人记录 https://ke.qq.com/course/336509 M了个J - 博客园 https://www.cnblogs.com/mjios/
- PCA人脸识别学习笔记---原理篇
前言 在PCA人脸识别中我们把一个人脸图片看做一个特征向量,PCA做的事情就是:找到这样一组基向量来表示已有的数据点,不仅仅是将高维度数据变成低维度数据,更能够找到最关键信息. 假设已有数据{xi} ...