假设高度已知，请写出三栏布局，其中左右各为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
随机推荐
- windows下MySQL解压版安装
MySQL的安装 一.前期准备 获取MySQL解压版安装包(本文使用的是 [mysql-5.7.28-winx64.zip]版本) 获取方式: 通过官网下载,官方下载地址:“https://dev.m ...
- openresty安装配置
在centos7上操作的. 上周搞了两天的Nginx的location rewrite,突然,对Nginx有了更好的理解. 所以持续一下. yum install readline-devel pcr ...
- ZKWeb网页框架3.0正式发布
3.0 更新的内容有 更新 .NET 框架 替换项目模版的 netcoreapp2.2 到 netcoreapp3.0 目前支持的 .NET 框架有: net461, netcoreapp2.0, n ...
- 解决JRebel对myBatis Mapper 失效的问题
解决JRebel对myBatis Mapper 失效的问题 在之前的文章中介绍了JRebel这个插件的使用和优势,虽然它对配置文件的改动的热更新是生效的,但是mybatis的mapper文件的改动却无 ...
- 关于css布局的记录(一) --table和flex布局
1.table方式布局 效果图: 直接用table等标签布局,table布局自动垂直居中 亦可用 display:table == <table>.display:table-cell = ...
- HUE Oozie : error=2, No such file or directory采坑记录
HUE Oozie : error=2, No such file or directory采坑记录 1.错误详情 一直都是同一种方式在hue上定义workflow,不知为啥 今天定义的就是不行... ...
- webpack动态加载打包chunk命名
最近,遇到复杂h5页面开发,为了优化H5首屏加载速度,想到使用按需加载的方式,减少首次加载的JavaScript文件体积,于是将处理过程在这里记录一下,涉及到的主要是以下三点: 使用Webpack如何 ...
- 系统 (一) Windows10安装Ubuntu子系统
前言 本文将基于 Windows10专业版 安装 Ubuntu子系统 1.控制面板 -> 程序 -> 选择启用或关闭Windows功能 -> 勾上 适用Linux的Windwos子系 ...
- 头条小视频和西瓜视频signature签名算法
点击上方↑↑↑蓝字[协议分析与还原]关注我们 "分析今日头条内小视频和西瓜视频分享后浏览器打开所用的signature签名算法." 上月写的一篇关于使用微信的wxid加好友的文章, ...
- iOS引导页（开局滚动效果）
参考链接1:https://jingyan.baidu.com/article/4dc40848a341dfc8d846f152.html 参考链接2:https://www.cnblogs.com/ ...