zoukankan      html  css  js  c++  java
  • 纯css实现两列等高

    <!doctype html>
    <html>
    <head>
    <meta />
    <title>Title</title>
    <style type="text/css">  
    *{ margin:0; padding:0;}
    .wrap { margin: 0 auto; width: 600px; clear: both; overflow: hidden; } 
    .left {margin-bottom: -8000px; padding-bottom: 8000px; width: 300px; float: left; background: #f00; }
    .right {margin-bottom: -8000px; padding-bottom: 8000px; width: 200px; float: right; background: #0f0; }
    </style>
      
    </head>
    
    <body>
    <div class="wrap">
        <div class="left">
            <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p> 
        </div>
        <div class="right">
            <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text t text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
        </div>
    </div>
    </body>
    </html>

    原理: 父盒子包含两个div,这两个div的不用写高度,而是都写上padding-bottom: 10000px;margin-bottom: -10000px;然后给父盒子加是overflow:hidden;如果填充这两个div,较高的那个div的高度将决定父盒子的高度。

  • 相关阅读:
    ArcGIS添加鹰眼
    C#设计模式--工厂方法
    C#设计模式--简单工厂
    C# 单例模式(转)
    事务的 原子性、一致性、隔离性、持久性
    asp.net 常用的3中身份验证
    angular localStorage使用方法
    angular.js升序降序过滤器
    ionic中$ionicPopover和$ionicModal
    ionic的弹出框$ionicPopover
  • 原文地址:https://www.cnblogs.com/darkterror/p/5212613.html
Copyright © 2011-2022 走看看