布局：高度已知，布局一个三栏布局，左栏和右栏宽度为200px，中间自适应
需求：高度已知为200px，写出三栏布局，左栏和右栏各位200px，中间自适应，如下图所示：
方法一：float浮动布局
原理是：定义三个区块，需要注意的是中间的区块放在右边区块的下面，统一设置高度为200px，然后设置左边栏宽度为200px并且float:left，设置右边栏宽度为200px并且float:right
优点：兼容性比较好
缺点：float会脱离文档流，需要处理float周边的元素比如清除浮动
浮动布局的原理：查看浮动布局详解
<style>
html *{
padding: 0;
margin: 0;
}
.layout article div{
min-height: 200px;
}
.left{
width: 200px;
float: left;
background-color: red;
}
.right{
width: 200px;
float: right;
background-color: blue;
}
.center{
background-color: green;
}
</style>
<body>
<section class="layout float">
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">浮动解决方案</div>
</article>
</section>
</body>
效果如下：拉动浏览器窗口的时候，中间宽度自动变化，左右边栏不会变化
当center这个元素里面的内容超过设置的这个高度，会出现如下这样的问题
解决办法可以在center中添加一个属性：overflow: hidden;后效果如下：
所以当高度不确定的时候，这种布局方式不适用，左右两边的高度不会跟着变动
方法二：绝对定位布局
实现原理：设置三个区块分别左中右，并且统一设置高度为200px和绝对定位，左边栏left:0，右边栏right:0,最重要的是中间的区块，不设置宽度，并且设置left:200px,right:200px，这个定位的数值也就是左边栏和右边栏的宽度大小
优点：快捷，不容易出问题
缺点：定位会脱离文档流，那么后面的元素也都是要脱离文档流的，这个方式的可使用性比较差
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
html *{
padding: 0;
margin: 0;
}
.layout article div{
min-height: 200px;
position: absolute;
}
.left{
width: 200px;
left: 0;
background-color: red;
}
.right{
right: 0;
width: 200px;
background-color: blue;
}
.center{
background-color: green;
left: 200px;
right: 200px;
}
</style>
<body>
<section class="layout absolute">
<article class="left-right-center">
<div class="left"></div>
<div class="center">绝对定位解决方案</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
效果如下：拉动浏览器窗口的时候，中间宽度自动变化，左右边栏不会变化
方法三：flexbox布局方式
实现原理：首先定义三个区块，分别为左中右，并且统一设置高度为200px，然后在这三个区块的父元素中设置display:flex，设置左边栏和右边栏宽度为200px,中间区块设置flex:1
优点：比较完美的一种方式，在移动端基本都是使用这个布局方式，这是css3中的新的布局方式，当设置最小高度后，中间区块内容溢出时高度会自动撑开，左右两边的高度也可以跟着撑开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
html *{
padding: 0;
margin: 0;
}
.layout.flexbox article div{
min-height: 200px;
}
.layout.flexbox .left-right-center{
display: flex;
}
.left{
width: 200px;
background-color: red;
}
.right{
width: 200px;
background-color: blue;
}
.center{
background-color: green;
flex: 1;
}
</style>
<body>
<section class="layout flexbox">
<article class="left-right-center">
<div class="left"></div>
<div class="center">flexbox解决方案</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
效果如下：拉动浏览器窗口的时候，中间宽度自动变化，左右边栏不会变化
方法四：表格布局方式
实现原理：定义三个区块，并且统一设置高度为200px和display:table-cell，然后左边栏和右边栏宽带设置为200px,中间区块不设置宽度，最后需要在这三个区块的父元素上设置width:100%和display:table
优点：兼容性非常好，在IE8也是可以的，弥补flexbox布局在IE8下的不支持
缺点：当某个区块高度不足的时候（固定高度），其他区块也跟着需要调整高度，但有这种需求就是其他区块不想跟着调整高度，这就是这个布局的缺点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
html *{
padding: 0;
margin: 0;
}
.layout.table article div{
display: table-cell;
height: 200px;
}
.layout.table .left-right-center{
display: table;
width: 100%;
}
.left{
width: 200px;
background-color: red;
}
.right{
width: 200px;
background-color: blue;
}
.center{
background-color: green;
}
</style>
<body>
<section class="layout table">
<article class="left-right-center">
<div class="left"></div>
<div class="center">表格布局解决方案</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
方法五：网格布局
实现原理：定义三个区块分别为左边栏，中间区块，右边栏，然后再父元素上设置display:grid，grid-template-rows: 200px;（设置格子的高度），grid-template-columns: 200px auto 200px;（这里表示有三列，第一列和第三列的宽度为200px，第二列自动）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
html *{
padding: 0;
margin: 0;
}
.layout.grid .left-right-center{
width:100%;
display: grid;
grid-template-rows: 200px;
grid-template-columns: 200px auto 200px;
}
.left{
background-color: red;
}
.right{
background-color: blue;
}
.center{
background-color: green;
}
</style>
<body>
<section class="layout grid">
<article class="left-right-center">
<div class="left"></div>
<div class="center">网格布局解决方案</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
效果如下：效果如下：拉动浏览器窗口的时候，中间宽度自动变化，左右边栏不会变化
需求：如果高度不确定，那么上述的布局方式哪个还可以适用
flexbox布局和table布局是可以通用的，会自动增加高度（三个区块都会自动增加高度）
网格布局：高度不会自动增加，里面的内容会溢出，但可以不设置grid-template-rows: 200px;这个属性的话，三列都会随着内容而增高，并且可以设置三个区块的最小高度
<style>
html *{
padding: 0;
margin: 0;
}
.layout.grid .left-right-center{
width:100%;
display: grid;
min-height: 100px;
grid-template-columns: 200px auto 200px;
}
.left{
background-color: red;
}
.right{
background-color: blue;
}
.center{
background-color: green;
}
</style>
<body>
<section class="layout grid">
<article class="left-right-center">
<div class="left"></div>
<div class="center">
<p>flexbox解决方案</p>
<p>flexbox解决方案</p>
<p>flexbox解决方案</p>
</div>
<div class="right"></div>
</article>
</section> </body>
浮动布局：会出现下面这种情况
因为浮动的原理，中间区块的内容被区块1挡住了，当内容超出以后，没有了遮挡物，所以就出现了这种情况，解决这种问题需要使用BFC（查看盒子模型和弹性盒子模型的详解）
绝对定位：比如讲center里的内容增加，超过高度后这个区块自动增加，但是其他区块是不会自动增加的
布局：高度已知，布局一个三栏布局，左栏和右栏宽度为200px，中间自适应的更多相关文章
- css高度已知，左右定宽，中间自适应三栏布局
css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法
假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应的五种方法 HTML CSS 页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应 <!D ...
- 前端一面/面试常考题1-页面布局：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px,中间自适应。
题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. [题外话:日常宣读我的目标===想要成为一名优雅的程序媛] 一.分析 1. 题目真的像我们想得这么简单吗? 其实不然 ...
- Java集合-5. （List）已知有一个Worker 类如下： 完成下面的要求 1) 创建一个List，在List 中增加三个工人，基本信息如下： 姓名 年龄 工资 zhang3 18 3000 li4 25 3500 wang5 22 3200 2) 在li4 之前插入一个工人，信息为：姓名：zhao6，年龄：24，工资3300 3) 删除wang5 的信息 4) 利用for 循
第六题 5. (List)已知有一个Worker 类如下: public class Worker { private int age; private String name; private do ...
- 已知圆上三个点坐标，求圆半径 r 和 圆心坐标
问题: 已知圆上三个点坐标分别为(x1,y1).(x2,y2).(x3,y3) 求圆半径R和圆心坐标(X,Y) X,Y,R为未知数,x1,y1,x2,y2,x3,y3为常数 则由圆公式:(x1-X)² ...
- css中，在高度已知，写出三栏布局，其中左栏、右栏宽度各位300px，中间自适应
解决方案主要有五种 首先写入全局样式 <style type="text/css"> html * { margin: ; padding: ; } .layout { ...
- Matlab 将两个图像进行分离 已知其中一个图像
5.下图(a)是一幅两个灰度图像合成的图像,已知其中一幅图像如图(b)所示,试把另一幅图像提取出来,并显示. 运用减法做 %加载入要处理的图片 A=imread('a.png'); %将I变为[0,1 ...
- 假设高度已知，请写出三栏布局，其中左右各为300px 中间自适用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS设计一个三列布局的页面
探讨这种布局是因为最近对话框组件以及信息系统B/S界面布局的需要.无论是什么,我们在写CSS之前首先引入reset.css,我使用的是淘宝的reset. 01 /* 02 KISSY CSS Rese ...
随机推荐
- go runtime.Gosched()的作用分析
untime.Gosched()用于让出CPU时间片.这就像跑接力赛,A跑了一会碰到代码runtime.Gosched()就把接力棒交给B了,A歇着了,B继续跑. 看代码: package main ...
- css中的float属性以及清除方法 (2011-09-03 17:36:26)
CSS里面的浮动属性是布局的常用工具,只有真正了解它并熟练使用才能将它的优点发挥到极致. 许多页面中都有文字绕图效果,并且各区块分布得错落有置,很多朋友在自学CSS布局时为了做出这些效果往往会被div ...
- .Net开源框架列表
API 框架 NancyFx:轻量.用于构建 HTTP 基础服务的非正式(low-ceremony)框架,基于.Net 及 Mono 平台.官网 ASP.NET WebAPI:快捷创建 HTTP 服务 ...
- JavaSE-基础语法(二)-系统类(java.lang.*)和工具类(java.util.*)
系统类(java.lang.*)和工具类(java.util.*) 一.系统类(java.lang.*) 这个包下包含java语言的核心类,如String.Math.System和Thread类等,使 ...
- Rancher2.0构建kubernetes(K8S)集群
一.环境准备 1.准备至少3台CentOS7版本的虚拟机 # IP地址 主机名称 192.168.1.160 rancher 192.168.1.161 master 192.168.1.162 no ...
- photoshop使用笔记-制作古代印章
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 第一步:新建图层400x400像素,白色背景的图层,并且复制图层 第二步:设置前景色为R230,G30,B30 第三步:选择圆角 ...
- jQuery中是事件绑定方式--on、bind、live、delegate
概述:jQuery是我们最常用的js库,对于事件的绑定也是有很多种,on.one.live.bind.delegate等等,接下来我们逐一来进行讲解. 本片文章中事件所带的为版本号,例:v1.7+为1 ...
- React中props和state相同点和不同点
朋友们,我想死你们了,最近这几天忙着和病魔作斗争所以没怎么写博客,今天感觉好点了,赶紧来写一波,就是这木敬业. 今天我们来讨论讨论props和state相同点和不同点 首先我来概要说明一下这两者 pr ...
- SD从零开始62-63，不完全日志，业务伙伴及业务伙伴确定
[原创] SD从零开始62 不完全日志 不完全日志Incompletion log 一个不完全日志是销售凭证中对你公司重要的而还没有在系统中输入的所有数据的清单: 你可以在配置中为不完全日志定义这些数 ...
- 你的BI应用处于什么阶段？解读Gartner BI成熟度模型
文 | 帆软数据应用研究院 水手哥 本文出自:知乎专栏<帆软数据应用研究院>——数据干货&资讯集中地 无论国内还是国外,多数企业的BI和分析平台建设之路并不平坦:一是对自身的环 ...