等高布局的实现方式

摘要

对于前端开发人员来说,面试中常被问到的布局方式通常有等高布局和圣杯布局、双飞翼布局。对于不同的布局方式,其要求也是有区别的。笔者很少在项目中碰到这三种布局,尽管如此,我们还是有必要了解一下其实原理。

对于前端开发人员来说,面试中常被问到的布局方式通常有等高布局和圣杯布局、双飞翼布局。对于不同的布局方式,其要求也是有区别的。笔者很少在项目中碰到这三种布局,尽管如此,我们还是有必要了解一下其实原理。

在以前,对于等高布局通常做法是通过margin-bottom和padding-bottom相结合的方法,代码如下:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="author" content="Shaw">
  6.   <meta name="apple-mobile-web-app-capable" content="yes">
  7.   <meta name="format-detection" content="telephone=no, email=no">
  8.   <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  9.   <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10.   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  11.   <title>html5</title>
  12.   <style>
  13.     * {
  14.       margin: 0;
  15.       padding: 0;
  16.     }
  17.     .clear {
  18.       *zoom: 1;
  19.     }
  20.     .clear:after {
  21.       content: "";
  22.       display: block;
  23.       clear: both;
  24.     }
  25.     .fl {
  26.       float: left;
  27.       margin-bottom: -99999px;
  28.       padding-bottom: 99999px;
  29.     }
  30.     .wrap {
  31.       width: 500px;
  32.       margin: 0 auto;
  33.       word-break: break-all;
  34.       overflow: hidden;
  35.       border: 3px solid red;
  36.     }
  37.     .left {
  38.       width: 200px;
  39.       background: green;
  40.     }
  41.     .right {
  42.       width: 300px;
  43.       background: blue;
  44.     }
  45.   </style>
  46. </head>
  47. <body>
  48.   <div class="wrap clear">
  49.     <div class="fl left">leftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleft <br>left <br>left <br>left <br>left <br>left <br>left <br> </div>
  50.     <div class="fl right">right</div>
  51.   </div>
  52. </body>
  53. </html>

这次做项目时发现了一种更好的实现方式兼容IE8+,而且代码量很少且不借助浮动并能实现一边固定,另一边自适应,具体代码如下:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="author" content="Shaw">
  6.   <meta name="apple-mobile-web-app-capable" content="yes">
  7.   <meta name="format-detection" content="telephone=no, email=no">
  8.   <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  9.   <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10.   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  11.   <title>html5</title>
  12.   <style>
  13.     * {
  14.       margin: 0;
  15.       padding: 0;
  16.     }
  17.     .wrap {
  18.       display: table;
  19.       table-layout: fixed;
  20.       width: 500px;
  21.       margin: 0 auto;
  22.       word-break: break-all;
  23.       overflow: hidden;
  24.       border: 3px solid red;
  25.     }
  26.     .left {
  27.       display: table-cell;
  28.       width: 200px;
  29.       background: green;
  30.     }
  31.     .right {
  32.       display: table-cell;
  33.       background: blue;
  34.     }
  35.   </style>
  36. </head>
  37. <body>
  38.   <div class="wrap">
  39.       <div class="left">leftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleft <br>left <br>left <br>left <br>left <br>left <br>left <br> </div>
  40.       <div class="right">right</div>
  41.   </div>
  42. </body>
  43. </html>
    A+
发布日期:2018年03月01日  所属分类:HTML
标签:
shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

  1. 梦在哪 0

    学习了