zoukankan      html  css  js  c++  java
  • 【分享】CSS布局多列等高写法

     这个写法不是我发明的。也是在网上找了写资料写出来的。经过测试 兼容ie 6 7 8 FF 谷歌浏览器!

    主要思路是:正内下边距+负外下边距

    .e {padding-bottom: 32767px; margin-bottom: -32767px;}

    完整代码:

    代码
    <!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=gb2312" />
    <title>多列等高 idche</title>
    <style type="text/css">
    .main
    {overflow: hidden; width: 800px; margin: 0 auto;}
    .left
    {float: left; width: 250px;}
    .center
    {float:left; margin-left:5px; width:295px;}
    .right
    {float: right; width: 245px;}
    .e
    {padding-bottom: 32767px; margin-bottom: -32767px;}
    .box
    {background: #F5E2AF; border: 1px #FB9D51 solid;}
    </style>


    </head>

    <body>

    <div class="main">
    <div class="left e">
    <div class="box">123546<br/></div>
    <div class="box">123546<br/>123546<br/>123546<br/></div>
    <div class="box">123546<br/></div>
    <div class="box e">123546<br/>123546<br/>123546<br/>123546<br/>123546<br/>123546<br/></div>
    </div>
    <div class="center e">
    <div class="box">123546<br/>123546<br/></div>
    <div class="box">123546<br/></div>
    <div class="box">123546<br/>123546<br/></div>
    <div class="box e">123546<br/>123546<br/>123546<br/>123546<br/></div>

    </div>
    <div class="right e">

    <div class="box">123546<br/>123546<br/></div>
    <div class="box">123546<br/>123546<br/>1235412354123546<br/></div>
    <div class="box">123546<br/>123546<br/></div>
    <div class="box e">123546<br/></div>
    </div>
    </div>


    </body>
    </html>
    
    
    
    
  • 相关阅读:
    Java学习开篇
    《我的姐姐》
    世上本无事,庸人自扰之
    这48小时
    补觉
    淡定
    es java api 设置index mapping 报错 mapping source must be pairs of fieldnames and properties definition.
    java mongodb groupby分组查询
    linux 常用命令
    mongodb too many users are authenticated
  • 原文地址:https://www.cnblogs.com/idche/p/1722647.html
Copyright © 2011-2022 走看看