假设高度已知，请写出三栏布局，其中左右各为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
随机推荐
- WinForm WebBrowser 设置cookie
[DllImport("wininet.dll", CharSet = CharSet.Auto, SetLastError = true)] public static exte ...
- 【iOS翻译】对UIGestureRecognizer多种手势傻傻分不清
UIGestureRecognizerDelegate A set of methods implemented by the delegate of a gesture recognizer to ...
- sql server查询（SELECT ，where，distinct，like 查询，in，is null，group by 和having，order by，as）
基本查询: 实例表 示例表 --部门表 create table dept( deptno int primary key,--部门编号 dname ),--部门名 loc )--地址 ); --雇员 ...
- SpringCloud服务过滤filter
一.目录展示 二.application.yml配置文件 三.MyZuulFilter package com.zn.filter; import com.netflix.zuul.ZuulFilte ...
- SpringCloud 脚手架
疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 架构师成长+面试必备之 高并发基础书籍 [Netty Zookeeper Redis 高并发实战 ] 前言 Crazy ...
- vue/cli新旧版本安装方式
一.老版本安装 Shift+鼠标右键 选择打开命令窗口 1.创建项目之前,需先确保本机已经安装node 在命令窗口中执行node -v npm -v 2.一般情况下用npm安装东西比较慢,可以使用淘 ...
- Linux之shell详解
Shell是什么 Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁.Shell 既是一种命令语言,又是一种程序设计语言.Shell 是指一种应用程序,这个应用程序提供了一个界 ...
- Jenkins使用SSH构建Go项目并执行
目录 下载插件 配置要部署的服务器 构建项目 Jenkinx可以帮助我们通过SSH插件,将项目直接部署到指定的服务器. 下载插件 (1)点击左侧的"系统管理"菜单 ,然后点击 (2 ...
- HTTP Error 500.19 - Internal Server Error 无法读取配置文件
将Code移动文件夹就报以下错误,http error 500.19 - internal server error. 项目文件下.vs=>config=>applicationhost. ...
- IDEA 工具自动生成JavaBean类
1.先安装GsonFormat插件:File-->Setting-->Plugins-->GsonFormat-->OK 2.new 一个新的Class空文件,然后 Alt+I ...