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属性布局.前者适合布局首页,因为 ...
随机推荐
- Appium自动化测试教程-自学网-monkey参数
monkey 参数 参数分类 · 常规类参数 · 事件类参数 · 约束类参数 · 调试类参数 常规类参数 常规类参数包括帮助参数和日志信息参数.帮助参数用于输出Monkey命令使用指导:日志信息参数将 ...
- Appium自动化测试教程-自学网-monkey简介
Monkey简介 在Android的官方自动化测试领域有一只非常著名的“猴子”叫Monkey,这只“猴子”一旦启动,就会让被测的Android应用程序像猴子一样活蹦乱跳,到处乱跑.人们常用这只“猴子” ...
- python--第五天练习题
# 1.按alist中元素的age由大到小排序 alist = [{'name': 'a', 'age': 20}, {'name': 'b', 'age': 30}, {'name': 'v', ' ...
- 《视觉SLAM十四讲》学习日志(二)——初识SLAM
小萝卜机器人的例子: 就像这种机器人,它的下面有一组轮子,脑袋上有相机(眼睛),为了让它能够探索一个房间,它需要知道: 1.我在哪——定位 2.周围环境怎么样——建图 定位和建图可以理解成感知的 &q ...
- Liunx之django项目部署
一.python web 项目部署 python django默认启动python3 manage.py runserver 0.0.0.0:8000这种方式调用wsgiref单机模块,性能较低,生产 ...
- 全局安装webpack和本地安装
前提条件 在开始之前,请确保安装了 Node.js 的最新版本.使用 Node.js 最新的长期支持版本(LTS - Long Term Support),是理想的起步.使用旧版本,你可能遇到各种问题 ...
- fatal: unable to access 'https://github.com/Homebrew/brew/'
最近安装 Homebrew 遇到的坑,总结一下. 我的 Mac 版本是 10.13.6. 首先安装 Homebrew /usr/bin/ruby -e "$(curl -fsSL https ...
- How To Display Variable Value In View?
How To Display Variable Value In View? There are several ways. For example simply using @ like this: ...
- Flume-数据流监控 Ganglia
Ganglia 由 gmond.gmetad 和 gweb 三部分组成. gmond(Ganglia Monitoring Daemon)是一种轻量级服务,安装在每台需要收集指标数据的节点主机上.使用 ...
- vue 项目 使用sass以及注意事项
vue 项目 使用sass以及注意事项 1,安装依赖: npm install node-sass --save-dev npm install sass-loader --save-dev 注: 通 ...