子div将填充父div
[英]child divs will fill parent div
问题描述
我有N个非固定宽度的子div 。 而且我有一个不固定宽度的父div 。 我想，以填补和调整孩子div父小号div并排如侧td - tr关系。 我怎样才能做到这一点？
3 个解决方案
解决方案1
0 2013-03-13 16:07:10
对子元素使用float:left 。 在新行的第一个元素中使用clear:both 。
解决方案2
0 2013-03-13 16:14:54
对子元素使用float：left，但不要使用带有clear：both;的：first，而应使用具有“ clearfix”类的div-（请参见下文），并放置clear：both;。 在CSS中。
行之间div的标记-
<div class="clearfix">
与div有关的CSS
.clearfix{
clear:both;
}
解决方案3
0 2013-03-13 16:30:33
您说的是不固定的宽度，与高度无关。 tr-td关系很特殊，如果这正是您想要的，则可以显示诸如table-row / table-cell等对象。
在这里，您可以看到下面的代码有所不同： http : //jsfiddle.net/zv5KF/
body
{
font-size:10px;
}
.table
{
display:table;
border:1px solid black;
/*width:500px;*/
}
.tr
{
display:table-row;
}
.td
{
display:table-cell;
border:1px solid red;
<body>
<div class="table">
<div class="tr">
<div class="td" style="width:10px;height:10px;">They're</div>
<div class="td" style="width:50px;height:10px;">all</div>
<div class="td" style="width:100px;height:100px;">like</div>
<div class="td" style="width:25px;height:25px;">hello</div>
<div class="td">and</div>
<div class="td">hi</div>
</div>
</div>
<div style="border:1px solid black;">
<div style="float:left; border:1px solid red; width:10px;height:10px;">They're</div>
<div style="float:left; border:1px solid red; width:50px;height:10px;">all</div>
<div style="float:left; border:1px solid red;width:100px;height:100px;">like</div>
<div style="float:left; border:1px solid red;width:25px;height:25px;">hello</div>
<div style="float:left; border:1px solid red;width:25px;height:25px;">and</div>
<div style="float:left; border:1px solid red;">hi</div>
</div>
</body>
使子div扩展以填充父div的宽度
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.