Question

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

其中包含<div class="aTweet">个最多的列决定了所有三列的高度。其他人被“拉”＆＃39;降到它的高度。

我希望所有三列都是相同的高度，推文位于顶部。列底部的空白区域用灰色（背景）填充。

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

有什么想法吗？我确信这很简单，但我只是错过了它。感谢。

（使用Chrome + Opera 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;
}

Answer 1

成为inline-block，您可以使用vertical-align控制对齐：

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

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

就高度相同的列而言，CSS中的虚拟列有许多技巧。有关详细信息，请查看有关CSS技巧的this example。

Answer 2

按如下方式修改CSS：

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

默认情况下，内联块垂直对齐到文本的基线，这对应于每个文本块的最底部行的基线级别。

注意：获取背景颜色有点棘手......

Answer 3

你可以试试这个：

demo

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

列div被拉到容器的底部

3 个答案: