CSS容器Min-Height Max-Height声明

Question

我有一些具有交替背景颜色的div，我想根据其中嵌套div的高度调整高度。 例如：

<div class="tableHolder">
    <div class="oddRow">
        <div class="col1">test1</div>
        <div class="col2">test2</div>
        <div class="col3">test3</div>
        <div class="col4">test4</div>
    </div>
    <div class="evenRow">
        <div class="col1">test1</div>
        <div class="col2">test2</div>
        <div class="col3">test3</div>
        <div class="col4">test4</div>
    </div>
</div>

CSS声明将沿着这些方向发展。

.oddRow{
    width: 130px;
    min-height: 27px; (this is the default height for all rows unless "col" class grows larger/taller)
    height:auto; (would like it to be able to grow if internal div is taller than 27px)
}

.evenRow对于css声明也是如此。 显然还有更多的背景颜色和东西，但我认为这将得到重点。 任何帮助都会很棒。 小提琴： http ： //jsfiddle.net/AL7LB/

Answer 1

你浮动你的元素。 这就是高度不起作用的原因。 您需要应用clearfix。

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

并且您需要为包含元素提供clearfix类，在您的情况下<div class="tableHolderOdd"> 。

工作小提琴

关于clearfix的一些信息