zoukankan      html  css  js  c++  java
  • 完美的DIV三行三列自适应高度布局

    我们一般拿出来讨论的自适应高度的DIV布局,都是指有背景区分的,不用区分的三列布局很容易。不过在实际应用中很少有网站这样用,大多都是不用背景区分的。不过在这里我们并不讨论这种布局的实用性到底如何,而只是讨论实现这种布局的一种较完美的解决方案而已。

    所谓自适应高度,也就是不管某一列撑长而其它列的高度也跟跟相应地撑长,这个效果如果用TABLE的话是轻而易举的,而用DIV就没那么容易了。之前本民工也尝试了不少办法,比如用JS控制、padding-bottom一个很大的负值……但都觉得不够完美。后来在蓝色理想找到一个国外的站,感觉这是目前为止最完美的一种解决方案了,不用hack、不用JS、兼容性强……他们把这种布局称之为:完美的圣杯。

    perfect-3-column-div-structure

    原理其实很容易,理解之后应该可以解决很多样的布局方案。见上图,.colmask、.colmin、.colleft,分别为三列背景的容器,最外层的.colmask设定overflow:hidden;,通过相对定位分成三列。而内容容器.col1、 .col2、 .col3都放在最内层的.colleft里面,通过相对定位定好位置,所以不管.col1、 .col2、 .col3哪一个伸长或缩短,外部的.colmask、.colmin、.colleft都会跟着伸长与缩短,也就实现了我们所要的效果。

    <!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>demo</title>
    <style type="text/css">
    body
    {margin:0; padding:0; font-size:12px;}
    .header
    {width:100%; height:50px; background:#EEE; border-bottom:1px solid #000;}
    .colmask
    {position:relative; clear:both; width:100%; overflow:hidden;}
    .colright, .colmid, .colleft
    {float:left; width:100%; position:relative;}
    .col1, .col2, .col3
    {float:left; position:relative; overflow:hidden;}
    .threecol
    {background:#BBB;}
    .threecol .colmid
    {right:20%; background:#CCC;}
    .threecol .colleft
    {right:60%; background:#DDD;}
    .threecol .col1
    {width:58%; left:101%;}
    .threecol .col2
    {width:18%; left:23%;}
    .threecol .col3
    {width:18%; left:85%;}
    .footer
    {clear:both; width:100%; height:50px; background:#EEE; border-top:1px solid #000;}
    </style>
    </head>
    <body>
    <div class="header"> 这里是头部 </div>
    <div class="colmask threecol">
    <div class="colmid">
    <div class="colleft">
    <div class="col1">
    <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 class="col2"> 这里是左栏 </div>
    <div class="col3">
    <p>这里是右栏</p>
    <p>这里是右栏</p>
    <p>这里是右栏</p>
    <p>这里是右栏</p>
    </div>
    </div>
    </div>
    </div>
    <div class="footer"> 这里是底部 </div>
    </body>
    </html>

  • 相关阅读:
    百度之星资格赛1001——找规律——大搬家
    HDU1025——LIS——Constructing Roads In JGShining's Kingdom
    DP(递归打印路径) UVA 662 Fast Food
    递推DP UVA 607 Scheduling Lectures
    递推DP UVA 590 Always on the run
    递推DP UVA 473 Raucous Rockers
    博弈 HDOJ 4371 Alice and Bob
    DFS(深度) hihoCoder挑战赛14 B 赛车
    Codeforces Round #318 [RussianCodeCup Thanks-Round] (Div. 2)
    DP(DAG) UVA 437 The Tower of Babylon
  • 原文地址:https://www.cnblogs.com/bennman/p/1563159.html
Copyright © 2011-2022 走看看