CSS定位DIVs是流暢和響應

我有一個問題，使用CSS來正確定位DIVs。任何幫助將不勝感激！CSS定位DIVs是流暢和響應

問題：http://teamcoding.ca/leisure/specialevent/在網站上，我想在「事件」格在每個疊放響應，無論高度，就像是使用這個網站做：http://themify.me/demo/#theme=grido我的網站被渲染的方式，用DIV最高的高度推動所有其他的DIV。例如，如果將其展開爲具有三列，則div＃5應該低於div＃1。

JS小提琴：http://jsfiddle.net/QQFpD/4/這是我的代碼。我認爲將它放在JsFiddle而不是在msg框中會更容易。（請讓我知道我是否應該在這裏發佈我的代碼。）

來源

2012-06-10 mcranston18

這是浮動的本質。示例頁面（themify）也會混淆元素（浮動的本質），但能以某種方式縮小差距。仔細觀察，我們可以看到瀏覽器和窗口寬度調整之間存在一些動態的相互作用，因爲DOM被更新爲絕對最高值的新位置。你的解決方案必須在jQuery中，而不是靜態CSS。

來源

2012-06-10 19:55:00 mtf

感謝您的評論mtf。可以肯定的是，你是否說我只能使用jQuery完成DIV之間的動態相互作用（按照它們的示例）？ – mcranston18

儘管我自己並沒有使用插件，但我認爲** [jQuery Masonry插件]（http://masonry.desandro.com/）**可能有幫助。 – Jeroen

你的問題正如上面指出的那樣，浮體的本質。您需要重新考慮如何以列的形式定位事件。一個好的方法來處理這和使用花車將創建網格像這樣保持的佈局流體，唯一不足的是一些額外的非語義代碼：

/* __row 
* A row of columns, we define total page width here */ 
.row  {width:960px; height:100%; margin: 0 auto; position:relative;} 

/* __grid 
* Master Grid Layout elements */ 

.col1, .col2, .col3, .col4, .col5, .col6 { 
    position:relative; 
    height:100%; 
    float:left; 
    margin-left: 2%; 
}

與百分比合作使我們改變整體寬度與.row並擴大我們的列以適應。

.col1  {width: 15%;} 
.col2  {width: 32%;} 
.col3  {width: 49%;} 
.col4  {width: 66%;} 
.col5  {width: 83%;} 
.col6  {width: 100%; margin-left:0;} 
.colFirst {margin-left:0;} 
.colClear {clear:both;}

使用它來創建一個3列流動佈局：

<div class="row"> 
    <div class="col2 colFirst"> 
     <ul> 
      <li>1st item</li> 
      <li>2nd item</li> 
     </ul> 
    </div> 
    <div class="col2">... second column div's/data</div> 
    <div class="col2">... third column div's/data</div> 
    <div class="colClear></div> 
</div>

這樣，你的數據將全部落入列，將無縫地流下來的頁面給予確切的方式，你希望它看，並在純粹的CSS。

來源

2012-06-10 21:08:50

CSS定位DIVs是流暢和響應

回答

相關問題