1. 首頁
  2. 問答
  3. div divs最後一行的div divs高度相等

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

2013-02-16 187 views
7

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

+0

謝謝傑夫。這就是我想要實現的，但我希望最後的div底部應該對齊。沒有空的空間。 – Snippet 2013-02-16 03:48:49

+0

我想我已經做了類似的佈局，你可以發佈你的標記？ – 2013-02-16 04:53:49

回答

1

我不知道這是否適合您的場景，但是，下面的小提琴會拖動DIV的底部。

我不確定的事情是，當您將其轉換爲兩列模型時，所有塊都將可見，如果最終在最後一行顯示兩個塊，則底部將對齊到底部。

看看這有助於 - http://jsfiddle.net/AUV7J/

使得span爲display: table-cell，我們可以垂直對齊的塊裏面的底部

更新：

正如你所說，你不」 t要在兩者之間的空間。你將不得不以編程方式調整最後DIV的尺寸爲每列

看到更新Fiddle

更新：

對於動態欄，看到this

來源

2013-02-16 08:40:18

+0

謝謝。關於放大和縮小的一點小修正.. – Snippet 2013-02-16 09:30:14

+0

你可以像這樣動態渲染這些列http://jsfiddle.net/AUV7J/7/，我懶得把塊作爲元素，所以把它保存爲字符串，你可以優化，但工作是你想要的 – 2013-02-16 10:25:18

0

您可以設置每一個最後的內容基礎的高度瀏覽器的窗口，因爲你有一個固定數量的內容水平，你可以做一個計算，並使它最後的內容得心應手。這是我迄今爲止最好的想法。

來源

2013-02-16 05:57:14 stryker

1

我會綁定到，像這樣的窗口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

相關問題

 相關問題