html - 列 div 被拉到容器底部

Question

三列布局，所有三列占据页面的 1/3。 100% 的高度。

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

最多的列<div class="aTweet">其中的 决定了所有三列的高度。其他人被“拉”到它的高度。

我希望所有三列的高度相同，推文位于顶部。列底部的空白区域被灰色(背景)填充。

我只是不明白为什么他们会被拉到最底层。当您将 .thirdCol 中的高度设置为 400px(例如)时，它会变得非常有趣。

有什么想法吗？我确定这很简单，但我只是想念它。谢谢。

(顺便说一句，使用 Chrome + Opera)

JS Fiddle 中的代码 - 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;
}

Answer 1

作为 inline-block，您可以使用 vertical-align 控制对齐方式:

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

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

对于等高的列，CSS 中有很多伪列的技巧。看看this example有关 CSS 技巧的更多信息。