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">。

Working fiddle

Some infos about clearfix

CSS容器Min-Height Max-Height声明

1 个答案: