前端经典面试题之CSS实现三栏布局,左右宽度固定,中间宽度自适应
前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应。
看到这里我希望你能停下来思考几分钟,
1分钟~2分钟~3分钟~4分钟~5分钟!
好了,那么你想出了几种答案呢?
下面提供这道题的五种解决方案:
首先要写好整个页面的布局(初始化等)
<style>
html * {
padding: 0;
margin: 0;
} .layout {
margin-top: 20px;
} .layout article div {
min-height: 100px;
}
</style>
1.浮动的解决方案
<!-- 浮动布局解决方案 -->
<section class="layout float">
<style>
.layout.float .left {
float: left;
width: 300px;
background: red;
} .layout.float .right {
float: right;
width: 300px;
background: blue;
} .layout.float .center {
background: yellow;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
<p>1.这是布局的中间部分</p>
<p>2.这是布局的中间部分</p>
</div>
</article>
</section>
2.绝对定位的解决方案
<!-- 绝对定位的解决方案 -->
<section class="layout absolute">
<style>
.layout.absolute .left-center-right>div {
position: absolute;
} .layout.absolute .left {
left: 0;
width: 300px;
background: red;
} .layout.absolute .center {
left: 300px;
right: 300px;
background: yellow;
} .layout.absolute .right {
right: 0;
width: 300px;
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>绝对定位的解决方案</h1>
<p>1.这是布局的中间部分</p>
<p>2.这是布局的中间部分</p>
</div>
<div class="right"></div>
</article>
</section>
3.flexbox的解决方案
<!-- flexbox解决方案 -->
<section class="layout flexbox">
<style>
.layout.flexbox {
margin-top: 140px;
} .layout.flexbox .left-center-right {
display: flex;
} .layout.flexbox .left {
width: 300px;
background: red;
} .layout.flexbox .center {
flex: 1;
background: yellow;
} .layout.flexbox .right {
width: 300px;
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>flexbox的解决方案</h1>
<p>1.这是布局的中间部分</p>
<p>2.这是布局的中间部分</p>
</div>
<div class="right"></div>
</article>
</section>
4.表格布局的解决方案
<!-- 表格布局的解决方案 -->
<section class="layout table">
<style>
.layout.table .left-center-right {
width: 100%;
display: table;
height: 100px;
} .layout.table .left-center-right>div {
display: table-cell;
} .layout.table .left {
width: 300px;
background: red;
} .layout.table .center {
background: yellow;
} .layout.table .right {
width: 300px;
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>表格布局的解决方案</h1>
<p>1.这是布局的中间部分</p>
<p>2.这是布局的中间部分</p>
</div>
<div class="right"></div>
</article>
</section>
5.网格布局的解决方案
<!-- 网格布局的解决方案 -->
<section class="layout grid">
<style>
.layout.grid .left-center-right {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
} .layout.grid .left {
background: red;
} .layout.grid .center {
background: yellow;
} .layout.grid .right {
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>网格布局的解决方案</h1>
<p>1.这是布局的中间部分</p>
<p>2.这是布局的中间部分</p>
</div>
<div class="right"></div>
</article>
</section>
更详细的内容可以访问 http://www.waigai.cn
前端经典面试题之CSS实现三栏布局,左右宽度固定,中间宽度自适应的更多相关文章
- css 关于两栏布局,左边固定,右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
- CSS 实现:两栏布局(一边固定,一边自适应)
☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <d ...
- CSS实现三栏布局(5种)
常见的布局方式: float布局.Position定位.table布局.弹性(flex)布局.网格(grid)布局 那么我们就是用以上5种方式完成三栏布局,不过前提是左右宽度(假如左右宽度为300px ...
- css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位 <div class="left">左边</div> <div class=" ...
- 【CSS】三栏布局的经典实现
要求:自适应宽度,左右两栏固定宽度,中间栏优先加载: <!DOCTYPE html> <html> <head> <title>layout</t ...
- css实现三栏布局,两边定宽,中间自适应
1.利用定位实现 css代码如下: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #b ...
- css实现两栏布局,左侧固定宽,右侧自适应的7中方法
一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;marg ...
- 三种方法实现CSS三栏布局
本文由云+社区发表 作者:前端林子 本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果 1.方法一:自身浮动的方法 实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来 ...
- CSS3使用盒模型实现三栏布局
本篇文章由:http://xinpure.com/css3-box-model-to-implement-a-three-column-layout/ 使用 Position 绝对定位也是可以实现三栏 ...
随机推荐
- 转载-《Python学习手册》读书笔记
转载-<Python学习手册>读书笔记 http://www.cnblogs.com/wuyuegb2312/archive/2013/02/26/2910908.html
- MTK-LCM 屏幕使用fbconfig/PanelMaster来调试LCM驱动
屏幕调试是我们做的较多的工作,且以MIPI屏为主,调试时总是会遇到一些参数需要一点一点配的时候,这样的工作其实很是繁琐,在我们确认完硬件没有问题时能不能使用简易的方法来解决这个问题呢 ? MTK已经为 ...
- 修改Aptana Studio默认编码
1,修改:Text file encoding 2,修改:Initial HTML file contents
- Exp5 MSF基础应用 20164303景圣
一.实践内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 1.一个主动攻击实践,如ms08_067; (成功) 2.一个针对浏览器的攻击,如ms1 ...
- day12函数,三元表达式 ,列表推导式 ,字典推导式,函数对象,名称空间与作用域,函数的嵌套定义
复习 # 字符串的比较 # -- 按照从左往右比较每一个字符,通过字符对应的ascii进行比较 # 函数的参数 # 1)实参与形参: # -- 形参:在函数定义时()中出现的参数 # -- 实参:在函 ...
- zeros()和ones()和eye()
python--zeros函数和ones函数 使用numpy.zeros,numpy.ones,numpy.eye等方法可以构造特定的矩阵 >>>from numpy import ...
- git忽略对已入库文件的修改
项目开发过程中,会遇到本地配置文件每个开发人员不同的情况,但如果遇到类似数据库配置这种最终需要加入 git 版本控制的配置,则会陷入两难境地.要么不跟踪,要么有人提交后其他人同步下来必须手动修改,非常 ...
- C# 简单粗暴写日志
public static void WriteLog(string text) { string path = AppDomain.CurrentDomain.BaseDirectory; path ...
- vue-cli3.0 笔记
vue-cli 3.0 npm install -g @vue/cli # OR yarn global add @vue/cli ui 界面创建项目 vue ui 命令行创建项目 步骤 vu ...
- 解决Ubuntu无法通过ssh远程登录问题
1. 安装 open ssh: sudo apt-get install ssh sudo apt-get install openssh-server 2. 编辑配置文件,允许以 root 用户通 ...