css实现等高布局

第一种方式使用absolute布局

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <style>
    .equal_height {
      width: 100%;
      height: 999em;
      position: absolute;
      left: 0;
      top: 0;
    }
    
    .out_box {
      width: 66%;
      margin-left: auto;
      margin-right: auto;
      border: 1px solid #ccc;
      background-color: #f5f5f5;
      overflow: hidden;
      position: relative;
    }
    
    .left_box {
      width: 25%;
      float: left;
      position: relative;
    }
    
    .right_box {
      width: 74.6%;
      float: right;
    }
    
    .left_box_bg {
      background-color: #fff;
      border-right: 1px solid #ccc;
    }
    
    .left_con {
      padding: 1em;
      position: relative;
      z-index: 1;
    }
    
    .right_con {
      padding: 1em;
    }
    
    .out_box img {
      display: block;
    }
    
    .btn_box {
      width: 66%;
      margin: 1em auto 3em;
    }
  </style>

  <body>
    <div class="out_box">
      <div class="left_box">
        <div class="equal_height left_box_bg"></div>
        <div id="leftCon" class="left_con">
          <img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
        </div>
      </div>
      <div class="right_box">
        <div id="rightCon" class="right_con">
          <img id="rightImage" src="http://image.zhangxinxu.com/image/study/s/s128/mm5.jpg" />
        </div>
      </div>
    </div>
    <div class="btn_box">
      <button id="btnLeftSide">左侧栏高度增加</button>
      <button id="btnRightSide">右侧栏高度增加</button>
    </div>

  </body>
  <script type="text/javascript" src="../assets/js/jquery.min.js"></script>
  <script type="text/javascript">
    $("#btnLeftSide").bind("click", function() {
      $("#leftCon").append('<img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />');
    });
    $("#btnRightSide").bind("click", function() {
      $("#rightCon").append('<img src="http://image.zhangxinxu.com/image/study/s/s128/mm5.jpg" />');
    });
  </script>

</html>

第二种方式是用display:tabe-cell布局

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <style>
    .box {
      width: 600px;
      margin: 40px auto;
      font-size: 12px;
    }
    
    .list_row {
      display: table-row;
      overflow: hidden;
    }
    
    .list_cell {
      display: table-cell;
      width: 30%;
      margin-bottom: -100px;
      padding: 1.6%;
      *padding-bottom: 110px;
      background-color: #f5f5f5;
      *float: left;
    }
    
    .list_center {
      background-color: #f0f3f9;
    }
  </style>

  <body>
    <div class="zxx_main_con">
      <div class="box">
        <div class="list_row">
          <div class="list_cell">你一定也有过这种感觉的。当你心事重重，渴望找一个人聊一聊的时候，那个可以聊的人来了，可是你们却并没有聊什么。当然，聊是聊了，可是他聊他的，你也试着开始聊你的，只是到后来，你放弃了……那么，最后的办法就是静下来，啃啮自己的寂寞。或者反过来说，让寂寞来吞噬你。------罗兰《寂寞的感觉》</div>
          <div class="list_cell list_center">作为一个被基阿异捅过两个大血窟窿的人。告诉后来的基友们一句：一命二运三风水，四积阴功五读书。</div>
          <div class="list_cell">奔波了一天，收到了无数的生日快乐，享受了电影见面会现场各种形式的祝福和礼物，以及场面宏大的生日快乐歌，感谢＜西风烈＞，感谢支持我的朋友们！现在机场举长寿面祝你们都永远幸福快乐！ </div>
        </div>
      </div>
    </div>
  </body>

</html>

 

posted @ 2018-04-02 15:07  欧辰0312  阅读(238)  评论(0)    收藏  举报