假设高度已知，请写出三栏布局，其中左右各为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
随机推荐
- Mybatis一级缓存、二级缓存详讲
Mybatis 一级缓存.二级缓存 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 查询缓存 首先,我们先看一下这个标题“查询缓存”,那就说明跟增.删.改是没有任何关联的,只有在查询 ...
- python 多线程编程之threading模块（Thread类）创建线程的三种方法
摘录 python核心编程 上节介绍的thread模块,是不支持守护线程的.当主线程退出的时候,所有的子线程都将终止,不管他们是否仍在工作. 本节开始,我们开始介绍python的另外多线程模块thre ...
- C++ lambda expression
Emerged since c++11, lambda expression/function is an unnamed function object capable of capturing v ...
- 微信小程序APP生命周期
小程序APP生命周期需要先从app.js这个文件开始,App() 必须在 app.js 中调用,必须调用且只能调用一次,app.js中定义了一些应用的生命周期函数 onLaunch----当小程序初始 ...
- Android动态添加碎片
我们编写一个能够用过按钮动态更替碎片的APP,首先在主页上显示第一个碎片,点击按钮后可以替换到第二个碎片,或者删除已经替换掉的第二个碎片. 一.MainActivity.java import and ...
- Things 3 for Mac是什么？如何使用？
为大家介绍一款实用的效率管理软件“Things 3 for Mac”,它通过使用标签和智能过滤条,东西结合了强大的功能和简单性,Leopard风格的来源列表可以快速轻松地进行对焦.与一个美丽的用户界面 ...
- Django-如何写好一个celery定时任务
1.首先在项目同名目录下建一个celery.py from __future__ import absolute_import import os from celery import Celery ...
- ReactNative: 使用弹出框组件ActionSheetIOS组件
一.简介 在上一篇文章中,详细介绍了对话框组件,除此之外,React-Native系统还给开发者提供了一个弹框框组件ActionSheetIOS组件,它的弹出方式与对框框不同,它是从底部弹出,与iOS ...
- PlayJava Day023
进程:进程是程序的一次动态执行过程,它经历了从代码加载.执行到执行完毕的一个完整过程,这个过程也是进程本身从产生.到发展到最终消亡的过程 多进程:多进程操作系统能同时运行多个进程(程序) 多线程:是指 ...
- springboot整合web开发（整合servlet、filter、listener、访问静态、文件上传）
整合servlet 1.继承HttpServlet 2.添加@WebServlet注解 @WebServlet(name="FirstServlet",urlPatterns=&q ...