假设高度已知，请写出三栏布局，其中左右各为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
随机推荐
- Docker图形化工具Portainer详解
一.介绍 说明: Portainer是易于使用的软件,可为软件开发人员和IT操作人员提供直观的界面. Portainer为你提供Docker环境的详细概述,并允许你管理容器,镜像,网络和数据卷 ...
- Gradle Java 插件
Java 插件是构建 JVM 项目的基础,它为项目增加了很多能力,例如编译,测试,打包,发布等等. 很多插件都是基于 Java 插件实现的,例如 Android 插件. 用法 使用 id 应用插件 p ...
- JDK1.8新特性-Lambda表达式
Lambda 表达式 Lambda 表达式,也可称为闭包,它是推动 Java 8 发布的最重要新特性. Lambda 允许把函数作为一个方法的参数(函数作为参数传递进方法中). 使用 Lambda 表 ...
- python数据挖掘第三篇-垃圾短信文本分类
数据挖掘第三篇-文本分类 文本分类总体上包括8个步骤.数据探索分析->数据抽取->文本预处理->分词->去除停用词->文本向量化表示->分类器->模型评估.重 ...
- 解决mysql导入数据量很大导致失败及查找my.ini 位置（my.ini）在哪
数据库数据量很大的数据库导入到本地时,会等很久,然而等很久之后还是显示失败: 这是就要看看自己本地的没mysql是否设置了超时等待,如果报相关time_out这些,可以把mysql.ini尾部添加ma ...
- Oracle11g在虚拟机win7上的详细安装过程（包括win7在虚拟机上的安装）
http://www.imsdn.cn/这个是镜像文件的下载地址,之前下载雨林和深度的VM识别不了. 这个好了之后就可以去这个网址下看安装教程很详细.https://blog.csdn.net/u01 ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
- SpringBoot应用篇（二）：SpringSecurity实现带验证码的登录认证 附代码
一.文章简介 本文简要介绍了spring security的基本原理和实现,并基于springboot整合了spring security实现了基于数据库管理的用户的登录和登出,登录过程实现了验证码的 ...
- Ubuntu Server 上使用Docker Compose 部署Nexus(图文教程)
场景 Docker-Compose简介与Ubuntu Server 上安装Compose: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...
- JavaScript 日期格式
有四种 JavaScript 日期输入格式: 类型 实例 ISO 日期 "2018-02-19" (国际标准) 短日期 "02/19/2018" 或者 &quo ...