zoukankan      html  css  js  c++  java
  • div 等高度问题

    来自:http://www.cnblogs.com/wifi/articles/3059038.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题 1</title>
    <style type="text/css">
    * {
     margin: 0;
     padding: 0;
    }
    body {
     margin:30px;
     font:14px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体, sans-serif;
    }
    .main {
     overflow: hidden;
      500px;
     margin: 0 auto;
    }
    .left {
     float: left;
      250px;
     overflow: hidden;
    }
    .right {
     float: right;
      245px;
     overflow: hidden;
    }
    .bor_top {
     height:1px;
     background:#FB9D51;
     overflow:hidden;
    }
    .equal {
     padding-bottom: 32767px;
     margin-bottom: -32767px;
    }
    .box {
     background: #F5E2AF;
     border: 1px #FB9D51 solid;
     padding-left:10px;
     padding-right:10px;
    }
    .mt5 {
     margin-top: 5px;
    }
    </style>
    </head>
    <body>
    <div class="main">
      <div class="left equal">
        <div class="box">
          <p>你相信这个左右等高的布局是纯的CSS写的吗?</p>
        </div>
        <div class="box mt5">
          <p>来测试一下吧?~!</p>
        </div>
        <div class="box mt5">
          <p>测试一下</p>
        </div>
        <div class="equal mt5 box">
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p> <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
        </div>
      </div>
      <div class="equal right">
        <div class="box">
          <p>测试一下</p>
          <p>测试一下</p>
        </div>
        <div class="box mt5">
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
        </div>
        <div class="box mt5">
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
        </div>
        <div class="equal mt5 box">
          <p>测试一下</p>
          <p>测试一下</p>
          <p>测试一下</p>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="left bor_top"></div>
      <div class="right bor_top"></div>
    </div>
    </body>
    </html>
    

      

    效果:

    无标题 1

    你相信这个左右等高的布局是纯的CSS写的吗?

    来测试一下吧?~!

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

    测试一下

     


    作者:JasonXuVip
    我的网址:政和生活网
    本文地址:
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.

  • 相关阅读:
    记一次cdh6.3.2版本spark写入phoniex的错误:Incompatible jars detected between client and server. Ensure that phoenix-[version]-server.jar is put on the classpath of HBase in every region server:
    kylin的除法函数的坑
    Exception:kylin构建cube, Cannot modify mapReduce.queue.name at runtime
    cdh版本 livy部署
    kylin-3.1.1-bin-hadoop3搭建,构建cube报的错误,Cannot modify dfs.replication at runtime. It is not in list of params that are allowed to be modified at runtime
    apache开源 国内镜像地址
    一次phoniex表查询报出 org.apache.hadoop.hbase.NotServingRegionException
    spark高级分析2的数据集地址
    题解 P4240【毒瘤之神的考验】
    题解 P4688/BZOJ4939 【[Ynoi2016] 掉进兔子洞】
  • 原文地址:https://www.cnblogs.com/jasonxuvip/p/3135447.html
Copyright © 2011-2022 走看看