假设高度已知，请写出三栏布局，其中左右各为300px 中间自适用
<!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>Document</title>
<style>
html * {
margin: 0;
padding: 0;
} div {
min-height: 100px;
text-align: center;
} .mt20 {
margin-top: 20px;
} .layout .left {
float: left;
background: yellow;
width: 300px;
} .layout .right {
float: right;
width: 300px;
background: blue;
} .layout .center {
background: red;
} .absolute .left {
position: absolute;
width: 300px;
background: yellow;
left: 0px;
} .absolute .right {
position: absolute;
width: 300px;
background: blue;
right: 0px;
} .absolute .center {
margin: 0 300px;
background: red;
} .flexbox {
display: flex;
} .flexbox .left {
width: 300px;
background: yellow;
} .flexbox .right {
width: 300px;
background: blue;
} .flexbox .center {
background: red;
flex: 1;
} .table {
display: table;
width: 100%;
height: 100px;
} .table div {
display: table-cell;
} .table .left {
width: 300px;
background: yellow;
} .table .right {
width: 300px;
background: blue;
} .table .center {
background: red;
} .grid {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
/*三个值代表三列第一列300px 中间自适用 右边300px 每列宽*/
} .grid .left {
background: yellow;
} .grid .right {
background: blue;
} .grid .center {
background: red;
}
</style> <body> <section class="layout">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动方案</h1>
</div>
</section>
<section class="absolute mt20">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>绝对定位方案</h1>
</div>
</section>
<section class="flexbox mt20">
<div class="left"></div>
<div class="center">
<h1>flex布局方案</h1>
</div>
<div class="right"></div>
</section> <section class="table mt20">
<div class="left"></div>
<div class="center">
<h1>table布局方案</h1>
</div>
<div class="right"></div>
</section>
<section class="grid mt20">
<div class="left"></div>
<div class="center">
<h1>grid布局方案</h1>
</div>
<div class="right"></div>
</section>
</body> </html>
假设高度已知，请写出三栏布局，其中左右各为300px 中间自适用的更多相关文章
- css中，在高度已知，写出三栏布局，其中左栏、右栏宽度各位300px，中间自适应
解决方案主要有五种 首先写入全局样式 <style type="text/css"> html * { margin: ; padding: ; } .layout { ...
- 假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法
假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应的五种方法 HTML CSS 页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应 <!D ...
- 前端一面/面试常考题1-页面布局：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px,中间自适应。
题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. [题外话:日常宣读我的目标===想要成为一名优雅的程序媛] 一.分析 1. 题目真的像我们想得这么简单吗? 其实不然 ...
- 前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应
前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...
- css篇-页面布局-三栏布局
页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. 1)浮动 2)绝对定位 3)Flexbox 4)表格布局 5)网格布局(CSS3的Grid布局) 代码: ...
- 布局：高度已知，布局一个三栏布局，左栏和右栏宽度为200px，中间自适应
需求:高度已知为200px,写出三栏布局,左栏和右栏各位200px,中间自适应,如下图所示: 方法一:float浮动布局 原理是:定义三个区块,需要注意的是中间的区块放在右边区块的下面,统一设置高度为 ...
- css-前端实现左中右三栏布局的常用方法:绝对定位，圣杯，双飞翼，flex，table-cell,网格布局等
1.前言 作为一个前端开发人员,工作学习中经常会遇到快速构建网页布局的情况,这篇我整理了一下我知道的一些方法.我也是第一次总结,包括圣杯布局,双飞翼布局,table-cell布局都是第一次听说,可能会 ...
- 如果有三个Bool型变量，请写出一程序得知其中有2个以上变量的值是true
下面这篇文章是从StackOverflow来的.LZ面试的时候遇到了一道面试题:“如果有三个Bool型变量,请写出一程序得知其中有2个以上变量的值是true”,于是LZ做了下面的这样的程序: bool ...
- 请写出JavaScript中常用的三种事件。
请写出JavaScript中常用的三种事件. 解答: onclick,onblur,onChange
随机推荐
- 如何向小姐姐解释SQL和NoSQL之间的区别
最近,在Medium上出现了一个采访问题:如何向奶奶解释SQL和NoSQL之间的区别.我认为作者使用自己的结构化家谱来比较sql和nosql之间的差异.写作非常好,但是有点尴尬.面试官没有时间听你的话 ...
- Java安装JDK
因为Java程序必须运行在JVM之上,所以,我们第一件事情就是安装JDK. 搜索JDK 13,确保从Oracle的官网下载最新的稳定版JDK: 1.选择JDK版本 2.同意协议,点击合适系统平台下载 ...
- C#深入浅出之操作符和控制流程
操作符 操作符简单举例就是生活中的+-*/等等运算符号,下面会详细讨论运算符内容. 一元正负操作符 有时候需要改变数值的正负号.一元操作符(-)可以使得数字的正负号改变. 例如:int a = -11 ...
- 微信小程序模板（template）和组件的区别
template模块主要是展示,方法需要在使用template的页面中定义,对于通用的数据,最先想到或者理应是template,但是template有个缺点,那就是只是页面效果,不会有对应的js操作. ...
- JS基础语法---Array对象的方法
Array对象的方法 Array.isArray(对象)---->判断这个对象是不是数组 instanceof关键字 判断对象是不是数组类型:两种方法: //1 instanceof var ...
- zipalign的使用
zipalign 是一个存档对齐工具,可为Android应用程序(.apk)文件提供重要的优化.目的是确保所有未压缩数据以相对于文件开头的特定对齐开始.具体来说,它会导致.apk中的所有未压缩数据(如 ...
- iOS----------jenkins
错误日志: ERROR: Error fetching remote repo 'origin' Finished: FAILURE ERROR: Error cloning remote repo ...
- Android 无源码smail进行debug
待调试项目在AndroidManifest.xml中debugable=true 参照此处:https://blog.csdn.net/ausboyue/article/details/8018918 ...
- java开发实习生面试经历
这是我第一次写博客,以前都是查看别人的博客分享学习技术,转眼间我也成为其中一员.从一位初学者到现在的开发实习生,不断前进着,跟随时代的脚步在程序的海洋里漂泊,也意识到自己的各种不足,但我还年轻,头还 ...
- grep的使用及正则表达式
1.常用选项: -E :开启扩展(Extend)的正则表达式. -i :忽略大小写(ignore case). -v :反过来(invert),只打印没有匹配的,而匹配的反而不打印. -n :显示行号 ...