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的高度将决定父盒子的高度。

  • 相关阅读:
    SpringBoot(十):SpringBoot的简单事务管理
    SpringBoot(九):SpringBoot集成Mybatis
    独立式智能扫码插座
    STC-51开发板-单片机控制数码管&按键&点阵综合操作
    单片机定时器与数码管静态显示
    半导体器件
    电路模型与规律
    单片机-引脚并行口结构讲解
    单片机-基础知识,存储原理,引脚简介———(第一个小程序)
    C语言-综合知识点
  • 原文地址:https://www.cnblogs.com/darkterror/p/5212613.html
Copyright © 2011-2022 走看看