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>
    
    
    
    
  • 相关阅读:
    bzoj3993: [SDOI2015]星际战争
    bzoj3583: 杰杰的女性朋友 && 4362: Graph
    bzoj2260: 商店购物 && 4349: 最小树形图
    老oj3444 && Pku3241 Object Clustering
    bzoj3754: Tree之最小方差树
    bzoj2215: [Poi2011]Conspiracy
    老oj曼哈顿最小生成树
    bzoj2180: 最小直径生成树
    棋盘问题
    油田 Oil Deposits
  • 原文地址:https://www.cnblogs.com/idche/p/1722647.html
Copyright © 2011-2022 走看看