如何强制浮动 div 的高度等于其父级的高度？
替代文本 http://img14.imageshack.us/img14/2055/sof.jpg< /a>
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; }
alt text http://img14.imageshack.us/img14/2055/sof.jpg
HTML markup:
<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; }
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
这本质上是一个“等柱高”问题。您不能直接将子级高度设置为 100%，因为父级的高度不确定。有解决方法< /a>.各种各样的。
但就你而言：使用表格。它显然是表格数据，因此使用表格没有任何问题。
This is essentially an “equal column height” question. You can't directly set the child height to 100% because the height of the parent is indeterminate. There are workarounds. of various sorts.
But in your case: use a table. It's clearly tabular data, so there's nothing wrong with using a table for it.
在这种情况下，我认为使用表在语义上是可以接受的，它会自动按照您想要的方式运行。
In this case I think it would be semantically acceptable to use tables, which would automatically behave the way you want.
我认为这个问题被问了很多。我发现这个寻找。
I think this question is asked a lot. I found this on searching.
怎么样？
设置“适用于现代浏览器”
What about setting
Works on modern browsers.