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>
    

  • 相关阅读:
    css3--简单的加载动画
    background--详解(背景图片根据屏幕的自适应)
    css--两行显示省略号兼容火狐浏览器
    tortoisegit--无法commit
    vim--学习
    JavaScript--数据结构与算法之图
    JSONP
    数据结构--只用位运算实现加减乘除操作
    剑指offer——不用加减乘除做加法
    shop--10.前端展示系统--首页展示(后台)
  • 原文地址:https://www.cnblogs.com/jianjie/p/13773435.html
Copyright © 2011-2022 走看看