布局：高度已知，布局一个三栏布局，左栏和右栏宽度为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 ...
随机推荐
- angular监听dom渲染完成，判断ng-repeat循环完成
一.前言 最近做了一个图片懒加载的小插件,功能需要dom渲染完成后,好获取那些需要懒加载的dom元素.那么问题来了,如果只是感知静态的dom用ready,onload都可以,但项目用的angular, ...
- js中的DOM操作汇总
一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...
- 三对角线性方程组(tridiagonal systems of equations)的求解
三对角线性方程组(tridiagonal systems of equations) 三对角线性方程组,对于熟悉数值分析的同学来说,并不陌生,它经常出现在微分方程的数值求解和三次样条函数的插值问题 ...
- ASP.NET Core Identity 实战（2）——注册、登录、Claim
上一篇文章(ASP.NET Core Identity Hands On(1)--Identity 初次体验)中,我们初识了Identity,并且详细分析了AspNetUsers用户存储表,这篇我们将 ...
- C# 循环语句 for
循环:反复执行某段代码. 循环四要素:初始条件,循环条件,循环体,状态改变. for格式 for(初始条件;循环条件;状态改变) { 循环体 } break ——中断循环,跳出整个循环 continu ...
- [css] css3 中的新特性加强记忆
css3被拆分成如下的小模块,选择器,盒模型,背景和边框,文字特效,2D/3D转换,动画,多列布局和用户界面 2D转换 使用transform:属性来为元素设置2D转换,兼容浏览器加前缀 –webki ...
- C-指针,二级指针,二维数组作为函数参数使用,C语言链表(详解)
一级指针 int *p; //表示定义一个int型(4字节)的指针p &p //表示p自身的地址位置 p ...
- 【转】Git 教程之协同开发
前面我们已经介绍过远程仓库的相关概念,不过那时并没有深入探讨,只是讲解了如何创建远程仓库以及推送最新工作成果到远程仓库,实际上远程仓库对于团队协同开发很重要,不仅仅是团队协同开发的基础,也是代码备份的 ...
- 【读书笔记】iOS-个人开发者与企业开发者的区别
个人开发者与企业开发者的一个主要的区别在于独立开发者授权描述文件必须列出具体的设备.另一个不同就是开发者账户最多使用100台设备,而企业则可以让苹果公司生成未锁定到特定设备并可以安装到任何设备上的授权 ...
- Sql Server 向上取整、向下取整、四舍五入取整
==================================================== [四舍五入取整截取] select round(55.56,0) ============== ...