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>
    
    
    
    
  • 相关阅读:
    IOS 11 通讯录手机号「隐形字符」的 Bug
    本地添加const参数 防止短信接口恶意调用
    javascript阿拉伯数字 转 汉字中文数字
    js去掉数组的空字符串
    Chrome 清除某个特定网站下的缓存
    vue-cli中的babel配置文件.babelrc详解
    提交到github报错Please tell me who you are
    跨域问题
    js单线程、js任务队列、异步操作
    Java 异常
  • 原文地址:https://www.cnblogs.com/idche/p/1722647.html
Copyright © 2011-2022 走看看