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属性布局.前者适合布局首页,因为 ...
随机推荐
- Invalid HTTP_HOST header: 'xxx.xxx:8000'. You may need to add 'xxx.xx' to ALLOWED_HOSTS
用python3 manage.py runserver 0.0.0.0:8000命令运行django程序后,通过浏览器访问服务器网址的8000端口,出现访问错误,报错为 Invalid HTTP_H ...
- Java核心数据结构(List、Map、Set)原理与使用技巧
JDK提供了一组主要的数据结构实现,如List.Set等常用数据结构.这些数据都继承自java.util.Collection接口,并位于java.util包内. 一.List接口 最重要的三种Lis ...
- 校庆神秘建筑（HDU 1411）
Problem 杭州电子科技大学即将迎来50周年的校庆,作为校庆委员会成员的我被上级要求设计一座神秘的建筑物来迎合校庆,因此我苦思冥想了一个月,终于设计出了一套方案,这座建筑物有点象古老埃及的金字塔, ...
- PHP 之快递100接口封装
<?php /** * Created by PhpStorm. * User: Yang * Date: 2019/8/23 * Time: 10:38 */ class Kuaidi_Que ...
- 记录下我用Jenkins打包碰到的坑
使用Andorid Studio 打包都是正常的,但是使用Jenkins自动打包一直报错,尝试过网上的各种方案,依然都不行,报错如下. FAILURE: Build failed with an ex ...
- fluent中隐藏模型的开启【转载】
转载自:http://blog.sina.com.cn/s/blog_5fd791530100d5ic.html fluent中设置了一些隐藏模型,普通的用户界面是没有相关选项的,必须用相关命令开启. ...
- ReactiveCocoa实践
1.按钮addTarget [[self.aDepositBtn rac_signalForControlEvents:UIControlEventTouchUpInside] subscribeNe ...
- go结构体的方法和普通函数
package main import ( "fmt" "math" ) type vertex struct { X, Y float64 } //值接收者是 ...
- pwn学习日记Day20 《程序员的自我修养》读书笔记
可执行文件的装载与进程 覆盖装入和页映射是两种典型的动态装载方法 进程建立的三步 1.创建一个独立的虚拟地址空间 2.读取可执行文件头,并且建立虚拟空间与可执行文件的映射关系. 3.将CPU的指令寄存 ...
- 黑马vue---61、为什么vue组件的data要是一个函数
黑马vue---61.为什么vue组件的data要是一个函数 一.总结 一句话总结: 因为js中以函数为变量作用域,所以这样可以保证每个组件的数据不互相影响 二.why components data ...