2009-09-29 40 views
1

alt text http://img14.imageshack.us/img14/2055/sof.jpg如何强制浮动div作为其父项的高度?

HTML标记:

<div class="planRisk"> 
    <div class="innerPlanRiskRight"> 
     <div class="rmPlanFrequency">10 </div> 
     <div class="rmPlanSeverity"> 5</div> 
     <div class="rmPlanRiskFactor">50 </div> 
     <div class="rmPlanNumSolutions">2</div> 
     <div class="rmPlanPercentComplete">34% </div> 
     <div class="rmPlanDeletePlanRisk"> X </div> 
    </div> 


    <div class="rmPlanRiskTitle"> Pandemic Influenza</div> 

</div> 

CSS:

.planRisk{background-color:#DEECD1; border:1px solid #BEBEBE;} 
.innerPlanRiskRight{float:right; color:#000000;} 

.rmPlanFrequency{float:left; width:46px;background-color:#d9dee1; text-align:center; border-right:1px solid #ebebeb; padding:0.2em;} 
.rmPlanSeverity{float:left; width:46px; background-color:#dbe1d4; text-align:center; border-right:1px solid #ebebeb; padding:0.2em;} 
.rmPlanRiskFactor{float:left; width:46px; background-color:#e5d5da; text-align:center; border-right:1px solid #ebebeb; padding:0.2em;} 
.rmPlanNumSolutions{float:left; width:46px; background-color:#dae4e4; text-align:center; border-right:1px solid #ebebeb; padding:0.2em;} 
.rmPlanPercentComplete{float:left; width:46px; background-color:#dddddd; text-align:center; padding:0.2em; } 
.rmPlanDeletePlanRisk{float:left; width:30px; background-color:#DEECD1; text-align:center; padding:0.2em;} 
.rmPlanRiskTitle{padding:0.2em; } 


.rmPlanSolutionContainer{background-color:#f0f9e8; border: 0 1px 1px; border-left:1px solid #CDCDCD; border-right:1px solid #cdcdcd; } 
.innerSolutionRight{float:right;} 
.rmPlanSolution{border-bottom:1px solid #CDCDCD; padding-left:1em;} 
.rmPlanSolutionPercentComplete{float:left; width:46px; background-color:#E2EADA; padding-left:0.2em; padding-right:0.2em; text-align:center;} 
.rmPlanDeleteSolution{float:left; width:30px; text-align:center; padding-left:0.2em; padding-right:0.2em; } 
+0

这更适合于doctype.com。 – Joren 2009-09-29 15:44:08

回答

4

这实际上是一个“等列高度”的问题。您不能直接将子高度设置为100%,因为父级的高度不确定。有workarounds。各种各样的。

但在你的情况:使用表。它清楚地是表格数据,因此使用表格没有任何问题。

0

我认为这个问题是问了很多。我在搜索时发现this

1

在这种情况下,我认为它会在语义上接受使用表,它会自动按照你想要的方式行事。

0

什么关于现代浏览器设置

min-height: inherit; 

作品。

相关问题