CSS容器最小高度最大高度声明

我有一些交替背景颜色的div，我想根据它们中嵌套div的高度进行高度调整。例如：CSS容器最小高度最大高度声明

<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/

来源

2014-03-03 Nick G

是啊，有啥问题？ –

集装箱高度将默认调整以包含其内容。 – TylerH

问题是，如果说“col1”包装到第三个文本行上，那么“oddRow”或“evenRow”div的高度不会增加，这会使其高度大于27px，oddRow只会保持在27px，颜色切断，然后在其下面多出一行文字 –

你正在浮动你的元素。这就是为什么高度不起作用。你需要应用一个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

来源

2014-03-03 15:05:13 Sebsemillia

非常感谢你，我不知道clearFix，我感谢你的帮助和快速响应每个人！ –

不客气，很高兴我能帮忙！ :) – Sebsemillia

CSS容器最小高度最大高度声明

回答

相关问题