- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- layout
- </title>
- <style media="screen">
- HTML *{ padding:0; margin:0; } .layout article{ margin-top:20px; } .layout
- article div{ min-height:100px; }
- </style>
- </head>
- <body>
- <!-- float 浮动 -->
- <section class="layout float">
- <style type="text/CSS">
- .layout.float .left{ float: left; width: 300px; background:red; } .layout.float
- .right{ float: right; width: 300px; background:green; } .layout.float .center{
- background: pink; }
- </style>
- <article class="left-right-center">
- <div class="left">
- </div>
- <div class="right">
- </div>
- <div class="center">
- <h1>
- 浮动解决方案
- </h1>
- </div>
- </article>
- </section>
- <!-- 绝对定位 -->
- <section class="layout absolute">
- <style type="text/css">
- .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:pink; } .layout.absolute .right{ right:0;
- width: 300px; background:green; }
- </style>
- <article class="left-center-right">
- <div class="left">
- </div>
- <div class="center">
- <h1>
- 绝对定位解决方案
- </h1>
- </div>
- <div class="right">
- </div>
- </article>
- </section>
- <!-- flexbox 布局解决方案 -->
- <section class="layout flexbox">
- <style type="text/css">
- .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: pink; } .layout.flexbox
- .right{ width: 300px; background: green; }
- </style>
- <article class="left-center-right">
- <div class="left">
- </div>
- <div class="center">
- <h1>
- flexbox 解决方案
- </h1>
- </div>
- <div class="right">
- </div>
- </article>
- </section>
- <!-- 表格布局解决方案 -->
- <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:
- pink; } .layout.table .right{ width: 300px; background: green; }
- </style>
- <article class="left-center-right">
- <div class="left">
- </div>
- <div class="center">
- <h1>
- 表格布局
- </h1>
- </div>
- <div class="right">
- </div>
- </article>
- </section>
- <!-- 网格布局解决方案 -->
- <section class="layout grid">
- <style>
- .layout.grid .left-center-right{ width: 100%; display: grid; grid-template-rows:100px;
- grid-template-columns:300px auto 300px; } .layout.grid .left{ background:
- red; } .layout.grid .center{ background: pink; } .layout.grid .right{ background:
- green; }
- </style>
- <article class="left-center-right">
- <div class="left">
- </div>
- <div class="center">
- <h1>
- 网格布局
- </h1>
- </div>
- <div class="right">
- </div>
- </article>
- </section>
- </body>
- </HTML>
延伸:
一, 这 5 种方案各自有什么优缺点?
(1) 浮动布局是有局限性的, 浮动元素是脱离文档流, 要做清除浮动, 这个处理不好的话, 会带来很多问题, 比如高度塌陷等.
浮动布局的优点就是比较简单, 兼容性也比较好. 只要清除浮动做的好, 是没有什么问题的.
延伸: 你知道哪些清除浮动的方案? 每种方案的有什么优缺点?
(2) 绝对定位布局优点, 很快捷, 设置很方便, 而且也不容易出问题, 你可以很快的就能想出这种布局方式.
缺点就是, 绝对定位是脱离文档流的, 意味着下面的所有子元素也会脱离文档流, 这就导致了这种方法的有效性和可使用性是比较差的.
(3)felxbox 布局是 css3 里新出的一个, 它就是为了解决上述两种方式的不足出现的, 是比较完美的一个. 目前移动端的布局也都是用 flexbox.
felxbox 的缺点就是不能兼容 IE8 及以下浏览器.
(4) 表格布局在历史上遭到很多人的摒弃, 说表格布局麻烦, 操作比较繁琐, 其实这是一种误解, 在很多场景中, 表格布局还是很适用的, 比如这个三栏布局, 用表格布局就轻易写出来了. 还有表格布局的兼容性很好, 在 flex 布局不兼容的时候, 可以尝试表格布局.
表格布局也是有缺陷的, 当其中一个单元格高度超出的时候, 两侧的单元格也是会跟着一起变高的, 而有时候这种效果不是我们想要的.
(5) 网格布局也是新出的一种布局方式, 如果你答出这种方式, 也就证明了你的实力, 证明你对技术热点是有追求的, 也说明你有很强的学习能力.
二, 如果把 "假设高度已知" 去掉, 考虑纵向, 中间内容高度不定, 这几个方案还有哪个可以用?
在不改变代码的情况下, 只有 flex 布局和表格布局可以使用, 会自动撑开.
三, 这 5 种方案的兼容性如何, 在真实项目中, 你会选择哪个?
变通:
四, 三栏布局: 左右宽度固定, 中间自适应? 上下高度固定, 中间自适应?
五, 两栏布局: 左宽度固定, 右自适应? 右宽度固定, 左自适应? 上高度固定, 下自适应? 下高度固定, 上自适应?
来源: http://www.qdfuns.com/note/12560/275e4ba53d157c59d1d5035aacdf6a21.html