列div被拉到容器底部

三列布局，所有三列佔頁面的1/3。 100％的高度。列div被拉到容器底部

列在它最<div class="aTweet">的決定所有三列的高度。其他人被「拉」到其高度。

我希望所有三列的高度相同，推文位於頂部。列底部的空白處填充灰色（背景）。

我只是不明白他們爲什麼被拉下來。當您將.thirdCol中的高度設置爲400px（例如）時，它會變得非常有趣。

任何想法？我確信這很簡單，但我只是想念它。謝謝。

（使用Chrome +歌劇BTW）

代碼在JS小提琴 - HTML：

<div id="manageStockGridArea" class="mainContentGridArea"> 
    <div id="FeedsTab" class="BlockInputArea"> 
     <div id="feed1" class="thirdCol"> 
      <div class="fitler"> 
       <select><option>OP1</option><option>Op2</option></select> 
       <select><option>OP1</option><option>Op2</option></select> 
      </div> 
      <div class="streamContainer"> 
       <div class="aTweet"> 
        <span class="tweetHandle">AtPeelypeel (firstName lastName)</span> 
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec purus in ante pretium blandit. Aliquam erat volutpat. Nulla libero lectus.</span> 
       </div> 
      </div> 
     </div> 
     <div id="feed2" class="thirdCol"> 
      <div class="fitler"> 
       <select><option>OP1</option><option>Op2</option></select> 
       <select><option>OP1</option><option>Op2</option></select> 
      </div> 
      <div class="streamContainer"> 
       <div class="aTweet"> 
        <span class="tweetHandle">AtPeelypeel (firstName lastName)</span> 
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec purus in ante pretium blandit. Aliquam erat volutpat. Nulla libero lectus.</span> 
       </div> 
       <div class="aTweet"> 
        <span class="tweetHandle">AtPeelypeel (firstName lastName)</span> 
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec purus in ante pretium blandit. Aliquam erat volutpat. Nulla libero lectus.</span> 
       </div> 

      </div> 
     </div> 
     <div id="feed3" class="thirdCol"> 
      <div class="fitler"> 
       <select><option>OP1</option><option>Op2</option></select> 
       <select><option>OP1</option><option>Op2</option></select> 
      </div> 
      <div class="streamContainer"> 
       <div class="aTweet"> 
        <span class="tweetHandle">AtPeelypeel (firstName lastName)</span> 
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec purus in ante pretium blandit. Aliquam erat volutpat. Nulla libero lectus.</span> 
       </div> 

      </div> 
     </div> 
    </div>

CSS：

body,html, #manageStockGridArea{height:100%;  min-height: 100% !important;} 

.thirdCol 
{ 
    width:32.5%; 
    display:inline-block; 
    background-color:grey; 
    height:400px; 
} 

.aTweet 
{ 
    background-color:Teal; 
} 
.tweetHandle 
{ 
    display:block; 
}

來源

2014-06-27 Matthew Peel

修改你的CSS如下：

.thirdCol { 
    width:32.5%; 
    display:inline-block; 
    background-color:grey; 
    min-height:100%; 
    vertical-align: top; 
}

默認情況下，內聯塊與文本的基線垂直對齊，對應於每個文本塊最底部行的基線級別。

注：獲取背景顏色是有點麻煩......

來源

2014-06-27 14:36:44

'垂直對齊：首位;'這是它。完善。謝謝。 –

作爲inline-block你可以用垂直對齊取向控制：

http://jsfiddle.net/9ngN3/4/

#FeedsTab > div{ 
    vertical-align: top; 
}

在列的條款同樣的高度，CSS中有許多可用於虛擬列的技巧。查看關於CSS技巧的this example以獲取更多信息。

來源

2014-06-27 14:38:07

你可以試試這個：

demo

.thirdCol 
{ 
    width:32.5%; 
    display:inline-block; 
    background-color:grey; 
    min-height:100%; 
    vertical-align:top; 
}

來源

2014-06-27 14:38:11

列div被拉到容器底部

回答

相關問題