div divs最后一行的div divs高度相等

Hello guys有没有办法实现以下设计？我做了我的div的设计，但我不知道如何得到它像this.divs在页面的中心，所有这些div的包装的宽度可以调整。div divs最后一行的div divs高度相等

enter image description here

普通内容

enter image description here

当包装变小，那么这将是一个两个格，最后仍是相等的。 *包装DIV调整它的宽度时，放大和缩小..

enter image description here

CODE

<html> 
<head> 
<title></title> 

<link rel="stylesheet" href="view/css/ui-layout.css" type="text/css"/> 
<link rel="stylesheet" href="view/css/layout.css" type="text/css"/> 
<script type="text/javascript" src="view/js/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="view/js/equalheight.js"></script> 

<style> 
html,body{ 
    padding: 0; 
    margin:0; 
    min-width: 820px; 
    color: #333333; 
    background-color: #F1F1f1; 
    font-family: Arial, Helvetica, Sans-Serif; 
    font-style: normal; 
    font-weight: normal; 
    font-size: 13px; 
} 
a{ 
    text-decoration:none; 
     color:#3EA7bb; 
     cursor: pointer; 
} 

ul{ 
    display: inline-block; 
    position: relative; 
} 

hr{ 
    border:1px solid #f1f1f1; 
} 
.cleared 
{ 
    display:block; 
    clear: both; 
    float: none; 
    margin: 0; 
    padding: 0; 
    border: none; 
    font-size: 0; 
    height:0; 
    overflow:hidden; 
} 
.reset-box 
{ 
    overflow:hidden; 
    display:table; 
} 

#main-container{ 
    width: 80%; 
    min-height: 100%; 
    min-width: 820px; 
    max-width: 1000px; 
    z-index: 0; 
    left: 0; 
    top: 0; 
    cursor:default; 
    overflow:hidden; 
    background-color:#FFFFFF; 
    position: relative; 
    margin: 0 auto; 
    padding-left: 20px; 
    padding-right: 20px; 
    -moz-box-shadow: 0 0 0 5px #333333; 
    -webkit-box-shadow: 0 0 0 5px #333333; 
    box-shadow: 0 0 5px #333333; 
} 

#header{ 

    height: 100px; 

    padding-top: 5px; 
    margin:0 auto; 
} 
#header-logo{ 
    width: 308px; 
    height: 100px; 
    background-image: url(../images/skerp.png); 
    background-position: center; 
    background-repeat: no-repeat; 
    margin-left: 20px; 
} 
#menu-bar{ 

    margin:0 auto; 
    min-height: 25px; 
    z-index: 100; 
    margin-top: 0; 
    margin-bottom: 0; 
    border-radius:0px; 
    /*-moz-box-shadow: 0 0 0 3px #333333; 
    -webkit-box-shadow: 0 0 0 3px #333333; 
    box-shadow: 0 0 3px #333333;*/ 
    -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); 
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); 
    margin:0 auto; 

} 
#menu-wraper{ 
    display: inline-block; 
    float: right; 
    margin-right: 10px; 

} 
.menu-element{ 
    min-width: 75px; 
    height: 25px; 
    display:inline-block; 
    cursor: pointer; 
    text-align:center; 
} 

#body-container{ 

    margin:0 auto; 
    padding-bottom: 90px; 
} 


.left-container,.right-container,.center-container{ 
    display: block; 
    float:left; 

} 
.featured{ 
margin:20px auto; 
padding:5px; 
-moz-box-shadow: 0 0 0 5px #333333; 
-webkit-box-shadow: 0 0 0 5px #333333; 
box-shadow: 0 0 5px #333333; 
border-radius: 5px; 
min-height: 300px; 
width: 780px; 
} 

.left 
{ 
    text-align: left; 
} 
.left span{ 
    float:left; 
    left:0; 
} 
.right 
{ 
    text-align: right; 
} 
.right span{ 
    right:0; 
    float:right; 
} 
.main-under-color{ 
    width: 300px; 
    height:5px; 
    display: block; 
} 
.sub-under-color{ 
    width: 100px; 
    height:5px; 
    display: block; 
} 
.content-wrapper{ 
    margin:10px auto; 
    min-width: 810px; 
    /*padding:10px;*/ 
} 

.content-wrapper h1{ 
    text-align: left; 
} 
.image-wrapper{ 
    margin: 0 auto; 

} 
.page-title{ 
    padding: 20px 10px 10px 10px; 
    display: block; 
} 
.page-title h1{ 
    font-weight: bold; 
    font-size: 40px; 
    text-indent: 20px; 
} 

.content-title h1{ 
    font-weight: bold; 
    font-size: 20px; 
} 
.content{ 
    padding:0px;/* 15px 15px 15px;*/ 
    display: block; 
    font-size: 15px; 
} 
.content p{ 
    text-align: justify; 
    line-height: 25px; 
    word-spacing: 1px; 
    word-wrap:break-word; 
} 
.border{ 
    -moz-box-shadow: 0 0 0 5px #999999; 
    -webkit-box-shadow: 0 0 0 5px #999999; 
    box-shadow: 0 0 5px #999999; 
    border-radius: 5px; 
    border:1px solid #999999; 
} 

.border-top{ 
    border-top:1px solid #999999; 
} 
.border-left{ 
    border-left:1px solid #999999; 
} 
.border-right{ 
    border-right: 1px solid #999999; 
} 
.border-bottom{ 
    border-bottom: 1px solid #999999; 
} 


    .column-wrapper{ 
     padding-top: 20px; 
     text-align: center; 
     vertical-align:middle; 
     width:100%;  

    } 

    .column-wrapper div{ 
     display: inline-table; 
     margin:2px; 


    } 
    .column-small{ 
     padding:10px; 
     padding-bottom:30px; 
     width:30%; 
     min-width: 250px; 
     position: relative; 
    } 

    .fixedbottomReadMore{ 
     position: absolute; 
     bottom: 10px; 
     right: 20px; 
    } 
    .fluedbottomReadMore{ 
     position: absolute; 
     float:right; 
     right:20px; 
    } 
    .column-small ul{ 
     margin-top: -10px; 
     width: 100%; 
     max-width: 240px; 
    } 
    .column-small ul li{ 
     text-align: left; 
    } 
    .column-small li{ 
     list-style: none; 
     padding: 5px; 
     text-indent: -30px; 
     word-wrap: break-word; 
    } 
    .column-medium{ 

    padding:10px; 
     width: 61%; 
     min-width: 505px; 
    } 
    .column-large{ 
    padding:10px; 
     width: 100%; 
     min-width: 760px; 
    } 



</style> 
</head> 
<body> 
<div id="main-container"> 


    <div id="body-container" > 

     <div class="content-wrapper "> 
      <div class="cleared"></div> 
       <div class="content "> 

        <div class="cleared"></div> 
        <div class="column-wrapper "> 
         <div class="column-large "> 

         </div> 
        </div> 
        <div class="cleared"></div> 
        <div class="column-wrapper"> 
         <div class="column-small border border-top"> 
          <h3>Features</h3> 
          <ul> 
           <li>Code blocking</li> 
           <li>Code Wrapping</li> 
           <li>Code Killing</li> 
           <li>Code Sleeping</li> 
          </ul> 
          <span class="fixedbottomReadMore"><a href="#">Read more</a></span> 

         </div> 

         <div class="column-small border border-top"> 
          <h3>Modules</h3> 
          <ul> 
           <li>Barking Around The house</li> 
           <li>Loving the Cats</li> 
           <li>Floating The points</li> 
           <li>Coding The Sleepers</li> 
           <li>Coding The Sleepers</li> 
          </ul> 
          <span class="fixedbottomReadMore"><a href="#">Read more</a></span> 
         </div> 

         <div class="column-small border border-top"> 
          <h3>Idont knows</h3> 
          <span class="fixedbottomReadMore"><a href="#">Read more</a></span> 

         </div> 

         <div class="column-small border border-top"> 
          <h3>Modules</h3> 
          <ul> 
           <li>Barking Around The house</li> 
           <li>Loving the Cats</li> 
           <li>Floating The points</li> 
           <li>Coding The Sleepers</li> 
           <li>Coding The Sleepers</li> 
          </ul> 
          <span class="fixedbottomReadMore"><a href="#">Read more</a></span> 

         </div> 
         <div class="column-small border border-top"> 
          <h3>Idont knows</h3> 
          <span class="fixedbottomReadMore"><a href="#">Read more</a></span> 

         </div> 

        </div> 
       </div> 
     </div> 
     <script> 
      $('.column-wrapper .column-small').equalHeightColumns(); 
     </script> 
    </div> 
    <div class="cleared reset-box"></div> 

    </div> 
</body> 
</html>

来源

2013-02-16 Snippet

+10

我不完全相信你的意思是，但从你的绘图看来，你想要实现的是一个类似于Pintrest的“砌体布局”。看看这个链接，看看它是否有帮助：http://designshack.net/articles/css/masonry/ – Jeff 2013-02-16 03:27:25

谢谢杰夫。这就是我想要实现的，但我希望最后的div底部应该对齐。没有空的空间。 – Snippet 2013-02-16 03:48:49

我想我已经做了类似的布局，你可以发布你的标记？ – 2013-02-16 04:53:49

我不知道这是否适合您的场景，但是，下面的小提琴会拖动DIV的底部。

我不确定的事情是，当您将其转换为两列模型时，所有块都将可见，如果最终在最后一行显示两个块，则底部将对齐到底部。

看看这有助于 - http://jsfiddle.net/AUV7J/

使得span为display: table-cell，我们可以垂直对齐的块里面的底部

更新：

正如你所说，你不” t要在两者之间的空间。你将不得不以编程方式调整最后DIV的尺寸为每列

看到更新Fiddle

更新：

对于动态栏，看到this

来源

2013-02-16 08:40:18

谢谢。关于放大和缩小的一点小修正.. – Snippet 2013-02-16 09:30:14

你可以像这样动态渲染这些列http://jsfiddle.net/AUV7J/7/，我懒得把块作为元素，所以把它保存为字符串，你可以优化，但工作是你想要的 – 2013-02-16 10:25:18

您可以设置每一个最后的内容基础的高度浏览器的窗口，因为你有一个固定数量的内容水平，你可以做一个计算，并使它最后的内容得心应手。这是我迄今为止最好的想法。

来源

2013-02-16 05:57:14 stryker

我会绑定到，像这样的窗口resize事件的函数...

var $win = $(window), 
    maxHeight, 
    mode, 
    calcMaxHeight = function() { 
     var h = $(this).height(); 
     if (h > maxHeight) { 
      maxHeight = h; 
     } 
    }, 
    adjustDivHeights = function() { 
     var $col = $(this); 
     if ($col.height() < maxHeight) { 
      var $lastChild = $col.children().last(); 
      $lastChild.height(maxHeight - ($col.height() - $lastChild.height())); 
     } 
    }; 

$win.resize(function() { 
    if ($win.width() > 500) { 
     if (mode === 'large') return; 
     mode = 'large'; 
     maxHeight = 0; 
     $('#container').children().each(calcMaxHeight).each(adjustDivHeights); 
    } else { 
     if (mode === 'small') return; 
     mode = 'small'; 
     maxHeight = 0; 
     // other size logic 
    } 
});

该事件仅如果/当你切换模式，以提高效率起见，当然火灾的计算。

来源

2013-02-16 06:50:47 jedmao

div divs最后一行的div divs高度相等

回答

相关问题