zoukankan      html  css  js  c++  java
  • 页面布局(2)——多列等高布局

    通过flex实现

    <!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>
        #container {
           400px;
          margin: 0 auto;
          background-color: #ddd;
          overflow: hidden;
          display: flex;
          align-items: stretch;
        }
    
        .left,
        .right {
          display: 1;
           200px;
          font-size: 16px;
          line-height: 24px;
          color: #333;
        }
    
        .left {
          background-color: deeppink;
        }
    
        .right {
          background-color: yellowgreen;
        }
      </style>
    </head>
    
    <body>
      <div id="container">
        <div class="left">多列等高布局</div>
        <div class="right">多列等高布局,使用(display:flex) 实现。多列等高布局,使用(display:flex) 实现。多列等高布局,使用(display:flex) 实现。多列等高布局,使用(display:flex) 实现。</div>
      </div>
    </body>
    
    </html>
    

    通过table-cell实现

    <!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>
        #container {
           400px;
          margin: 0 auto;
          background: #eee;
          overflow: hidden;
          display: table;
        }
    
        .left,
        .right {
          display: table-cell;
           200px;
          font-size: 16px;
          line-height: 24px;
          color: #333;
        }
    
        .left {
          background-color: deeppink;
        }
    
        .right {
          background-color: yellowgreen;
        }
      </style>
    </head>
    
    <body>
      <div id="container">
        <div class="row">
          <div class="left">多列等高布局</div>
          <div class="right">多列等高布局,使用 display:table-cell 的方式实现。多列等高布局,使用 display:table-cell 的方式实现。多列等高布局,使用 display:table-cell 的方式实现。</div>
        </div>
      </div>
    </body>
    
    </html>
    

    通过正负margin、padding实现

    <!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>
        #container {
           400px;
          margin: 0 auto;
          background: #eee;
          overflow: hidden;
        }
    
        .left,
        .right {
           200px;
          float: left;
          font-size: 16px;
          line-height: 24px;
          color: #333;
          padding-bottom: 5000px;
          margin-bottom: -5000px;
        }
    
        .left {
          background-color: deeppink;
        }
    
        .right {
          background-color: yellowgreen;
        }
      </style>
    </head>
    
    <body>
      <div id="container">
        <div class="left">多列等高布局左</div>
        <div class="right">多列等高布局,使用正负 margin 与 padding 相冲的方式实现。多列等高布局,使用正负 margin 与 padding 相冲的方式实现。</div>
      </div>
    </body>
    
    </html>
    
  • 相关阅读:
    IOS tableView的数据刷新
    IOS Modal(切换另外控件器方式)
    IOS UITabBarController(控制器)的子控制器
    iOS 应用数据存储的常用方式
    IOS 获取文本焦点 主动召唤出键盘(becomeFirstResponder) and 失去焦点(退下键盘)
    集合类型
    提取URL的搜索字符串中的参数
    本地对象、内置对象、宿主对象
    声明函数 执行上下文 匿名函数
    完善tab页面定位
  • 原文地址:https://www.cnblogs.com/janas-luo/p/9605207.html
Copyright © 2011-2022 走看看