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容器最小高度最大高度聲明

回答

相關問題