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>
    
  • 相关阅读:
    利用jmeter+JAVA对RPC的单接口(dubbo接口等)进行性能测试
    spring mvc中,直接注入的HttpServletRequst是否安全呢?
    基础篇系列,JAVA的并发包
    撸基础篇系列,JAVA的NIO部分
    1, 本地缓存的实现以及遇到的问题
    python操作mysql数据库之pymysql
    软件测试中常见的一些经典Bug
    做性能测试前需要弄明白的几个知识点
    接口测试常见问题汇总
    用例中四大核心要素的写作规范
  • 原文地址:https://www.cnblogs.com/janas-luo/p/9605207.html
Copyright © 2011-2022 走看看