zoukankan      html  css  js  c++  java
  • 531 等高布局:margin + padding,table + 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>等高布局解决方案1- table + table-cell</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
    
        #parent {
           100%;
          display: table;
        }
    
        #left,
        #right {
           300px;
          display: table-cell;
        }
    
        #left {
          background-color: #c9394a;
        }
    
        #right {
          background-color: green;
        }
      </style>
    </head>
    
    <body>
      <div id="parent">
        <div id="left">hahaha</div>
        <div id="right">Never underestimate your power to change?Whatever is worth doing is worth doing well.Never
          underestimate your power to change?Whatever is worth doing is worth doing well.Never underestimate your power
          tochange?Whatever is worth doing is worth doing well.
        </div>
      </div>
    </body>
    
    </html>
    


    <!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>等高布局解决方案2 - margin + padding</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
    
        #parent {
           100%;
          /* 超出溢出隐藏 */
          overflow: hidden
        }
    
        /* 伪等高布局 */
        #left,
        #right {
          float: left;
           300px;
          /* 内填充 【超过7个9就无效了】 */
          padding-bottom: 9999px;
          /* 外间距  */
          margin-bottom: -9999px;
        }
    
        #left {
          background-color: #c9394a;
        }
    
        #right {
          background-color: #cccccc;
        }
      </style>
    </head>
    
    <body>
      <div id="parent">
        <div id="left">哈哈哈</div>
        <div id="right">Never underestimate your power to change?Whatever is worth doing is worth doing well.Never
          underestimate your power to change?Whatever is worth doing is worth doing well.Never underestimate your power to
          change?Whatever is worth doing is worth doing well.</div>
      </div>
    </body>
    
    </html>
    

  • 相关阅读:
    [转] 使用Git进行小项目代码管理
    [转] Linux抓包工具tcpdump详解
    几天都是气温骤降,感冒了还没有收获
    1128进入自学实习培训路
    hdu 4952
    hdu 4937 2014 Multi-University Training Contest 7 1003
    hdu 4941 2014 Multi-University Training Contest 7 1007
    hdu 4939 2014 Multi-University Training Contest 7 1005
    hdu 4932 BestCoder Round #4 1002
    POJ 2362
  • 原文地址:https://www.cnblogs.com/jianjie/p/13773435.html
Copyright © 2011-2022 走看看