Question

[解决]

<div id="container">
    <div class="content">
        <div class="column">
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </div>
        <div class="column">
            <div class="top">
                TOP
            </div>
            <div class="bottom">
                BOTTOM
            </div>
        </div>
        <div class="column">
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </div>
    </div>
</div>

#container .content .column {
    position: relative;
    display:inline-block;
    height: 100%;
    width: 100px;
    border: 1px solid red;
}

#container .content .top,
#container .content .bottom {
   position: absolute;
   background-color: #AAA;
}

#container .content .top {
   top: 0;
}

#container .content .bottom {
   bottom: 0;
}

#container {
    min-height: 349px;
}

我有三个内联列，左边和右边的列具有相同的动态高度（它们包含生成的表，行数可变）我希望中间列与其邻居具有相同的高度，我希望他的TOP div夹在顶部，BOTTOM div夹在底部。

我已阅读this thread但无法让它发挥作用。

知道我做错了吗？

非常感谢！

修改使用Sowmya的解决方案： JS Fiddle

<div id="container">
    <div style="position: relative;">
    <div class="content">
        <div class="column">
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </div>
        <div class="column">
            <div class="top">
                TOP
            </div>
            <div class="bottom">
                BOTTOM
            </div>
        </div>
        <div class="column">
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </div>
    </div>
    </div>
</div>

#container .content .column {
    display:table-cell;
    height: 100%;
    width: 100px;
    border: 1px solid red;
    vertical-align: top;
}

#container .content .top,
#container .content .bottom {
   position: absolute;
   background-color: #AAA;
}

#container .content .top {
   top: 0;
}

#container .content .bottom {
   bottom: 0;
}

Answer 1

使用display:table-cell;与.column

#container .content .column {
    position: relative;
    display:table-cell;
    height: 100%;
    width: 100px;
    border: 1px solid red;
}

<强> DEMO

CSS：Clamp div在内联容器中的顶部和底部

1 个答案: