我有一个包含几个block-DIVS的容器DIV。每个块-DIV都包含带有值的SPAN项。这些块与容器具有相同的WIDTH并且在容器中浮动，因此它看起来好像是“行”。 SPAN项目在块DIV中浮动。
每个区块的固定高度为25px。 我想根据SPAN项目的内容（示例中的.bigger）增加块DIV的高度（自动）。但是它不能按预期工作。有什么建议吗？
更新代码
的test.html
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
<div id="VandaagLijst" class="Container">
<div
id="8378"
class="WorkorderBlock"
size="print"
>
<span class="Workorder">A100032</span>
<span class="Pn">3800702-1</span>
<span class="Description">Gas Turbine Engine 131-9B</span>
<span class="LastTask">Visual Inspection</span>
<span class="Status">Open</span>
<span class="Remarks">Test</span>
<span class="RemarksAction"><img src="/Content/note.png" title="Add remark" alt="Add remark" /></span>
<span class="Shipdate">30-04-2008</span>
<span class="ActualShipdate">30-04-2008</span>
<span class="Rek">-29</span>
<span class="Shortages">4132159-1 (SV): ""<br />4132202-4 (SV): ""</span>
</div>
<div
id="9142"
class="WorkorderBlock"
statustype="go"
size="print"
>
<span class="Workorder">S100580</span>
<span class="Pn">3616960-2</span>
<span class="Description">Cooling Fan Assembly</span>
<span class="LastTask">Disassembly</span>
<span class="Status">Open</span>
<span class="Remarks">Test</span>
<span class="RemarksAction"><img src="/Content/note.png" title="Add remark" alt="Add remark" /></span>
<span class="Shipdate">09-06-2008</span>
<span class="ActualShipdate">09-06-2008</span>
<span class="Rek">-365</span>
<span class="Shortages">3616967-1 (SV): ""</span>
</div>
<div
id="9278"
class="WorkorderBlock"
statustype="delay"
size="print"
>
<span class="Workorder">A100063</span>
<span class="Pn">3800550-1</span>
<span class="Description">Gas Turbine Engine Assembly -500</span>
<span class="LastTask">DMM Readout</span>
<span class="Status">Quoted - Hold</span>
<span class="Remarks">Test</span>
<span class="RemarksAction"><img src="/Content/note.png" title="Add remark" alt="Add remark" /></span>
<span class="Shipdate">18-07-2008</span>
<span class="ActualShipdate">18-07-2008</span>
<span class="Rek">8</span>
<span class="Shortages">160488-2 (SV): ""<br />160536-1 (SV): ""<br />2704442-4 (SV): ""<br />3101768-1 (NE): ""<br />3202854-1 (SV): ""<br />3283076-5 (SV): ""<br />3503876-6 (SV): ""<br />3505814-3 (OH): ""<br />362-509-9002 (NE): ""<br />3804011-8 (SV): ""<br />3805034-8 (SV): ""<br />3810630-10 (NE): ""<br />3810727-6 (SV): ""<br />3810730-1 (SV): ""<br />3822341-4 (SV): ""<br />3822353-1 (SV): ""<br />3822360-1 (NE): ""<br />3822364-1 (NE): ""<br />3822483-1 (SV): ""<br />3822615-1 (NE): ""<br />3826919-4 (SV): ""<br />3826981-2 (NE): ""<br />3827140-2 (SV): ""<br />3827141-2 (SV): ""<br />3827164-4 (SV): ""<br />3827191-1 (SV): ""<br />3827315-2 (SV): ""<br />3830444-1 (SV): ""<br />3840124-3 (NE): ""<br />3840130-1 (NE): ""<br />3840137-1 (NE): ""<br />3840206-1 (NE): ""<br />3840278-1 (NE): ""<br />3840279-1 (NE): ""<br />3840280-3 (NE): ""<br />3842151-3 (NE): ""<br />3842155-3 (SV): ""<br />3842160-5 (NE): ""<br />3844398-1 (NE): ""<br />3844460-2 (NE): ""<br />3844467-1 (NE): ""<br />3844469-2 (SV): ""<br />3844471-6 (NE): ""<br />3844481-2 (NE): ""<br />3844488-3 (SV): ""<br />3844495-1 (SV): ""<br />3844496-1 (NE): ""<br />3844514-2 (NE): ""<br />3844515-2 (NE): ""<br />3844602-5 (NE): ""<br />3844607-1 (NE): ""<br />3844608-1 (NE): ""<br />3844611-1 (NE): ""<br />3844612-1 (NE): ""<br />3844680-1 (NE): ""<br />3844854-1 (NE): ""<br />3844900-1 (SV): ""<br />3844910-1 (NE): ""<br />3862212-3 (NE): ""<br />3862285-1 (NE): ""<br />3870222-1 (SV): ""<br />3876212-1 (SV): ""<br />3876214-2 (NE): ""<br />3881248-2 (NE): ""<br />3881259-2 (NE): ""<br />3881334-1 (NE): ""<br />3881623-1 (SV): ""<br />3883327-1 (NE): ""<br />3883453-1 (OH): ""<br />3883499-2 (NE): ""<br />3884966-1 (NE): ""<br />3888267-7 (NE): ""<br />3888364-3 (SV): ""<br />4131000-6 (SV): ""<br />525-121-9003 (NE): ""<br />525-203-9006 (NE): ""<br />525-533-9005 (NE): ""<br />73563-53 (NE): ""<br />968214-6 (SV): ""<br />M25988-2-011 (NE): ""<br />M25988-2-012 (NE): ""<br />M25988-2-013 (NE): ""<br />M25988-2-908 (NE): ""<br />M83248-1-012 (NE): ""<br />M83248-1-013 (NE): ""<br />M83248-1-014 (NE): ""<br />M83248-1-016 (NE): ""<br />M83248-1-017 (NE): ""<br />M83248-1-019 (NE): ""<br />M83248-1-023 (NE): ""<br />M83248-1-038 (NE): ""<br />M83248-1-109 (NE): ""<br />M83248-1-110 (NE): ""<br />M83248-1-112 (NE): ""<br />M83248-1-118 (NE): ""<br />M83248-1-128 (NE): ""<br />M83248-1-152 (NE): ""<br />M83248-1-153 (NE): ""<br />M83248-1-158 (NE): ""<br />M83248-1-238 (NE): ""<br />M83248-1-280 (NE): ""<br />M83248-1-906 (NE): ""<br />M83248/1-011 (NE): ""<br />MS21043-3 (NE): ""<br />MS21043-4 (NE): ""<br />MS35769-10 (NE): ""<br />MS35769-6 (NE): ""<br />MS51843-25SS (NE): ""<br />MS9385-906 (NE): ""<br />MS9386-011 (NE): ""<br />MS9386-109 (NE): ""<br />MS9386-258 (NE): ""<br />MS9489-04 (NE): ""<br />MS9556-04 (NE): ""<br />MS9556-05 (NE): ""<br />MS9556-06 (NE): ""<br />MS9556-07 (NE): ""<br />MS9556-10 (NE): ""<br />MS9556-12 (NE): ""<br />MS9556-17 (NE): ""<br />MS9556-18 (NE): ""<br />MS9556-19 (NE): ""<br />MS9556-19 (NE): ""<br />MS9556-21 (NE): ""<br />MS9557-10 (NE): ""<br />MS9557-15 (NE): ""<br />MS9565-32 (NE): ""<br />MS9705-06 (NE): ""<br />NAS1102E3-7 (NE): ""<br />S8990-276 (NE): ""<br />S8990-281 (NE): ""<br />SL4-280 (NE): ""<br />SL4-280 (NE): ""</span>
</div>
<div
id="9389"
class="WorkorderBlock"
statustype="delay"
size="print"
>
<span class="Workorder">S100598</span>
<span class="Pn">3804011-8</span>
<span class="Description">LOAD COMPRESSOR</span>
<span class="LastTask">Repair</span>
<span class="Status">Cust-Delayed </span>
<span class="Remarks">Test</span>
<span class="RemarksAction"><img src="/Content/note.png" title="Add remark" alt="Add remark" /></span>
<span class="Shipdate">31-12-2009</span>
<span class="ActualShipdate">31-12-2009</span>
<span class="Rek">539</span>
<span class="Shortages">3610875-32 (NE): ""<br />3822343-1 (NE): ""<br />3826927-3 (NE): ""<br />3826961-2 (SV): ""<br />3826984-1 (NE): ""<br />3826986-2 (SV): ""<br />3826987-1 (SV): ""<br />3827041-1 (NE): ""<br />3827055-1 (NE): ""<br />3827076-3 (NE): ""<br />3827093-5 (SV): ""<br />3827160-2 (SV): ""<br />3840124-3 (SV): ""<br />M83248-1-145 (NE): ""<br />M83248-1-145 (NE): ""<br />S8990-167 (NE): ""<br />S8990-276 (NE): ""<br />S8990-605 (NE): ""</span>
</div>
</div>
</body>
</html>
test.css
BODY, TH, TD, DIV, SPAN, P {
font-size:11px;
}
#VandaagLijst {
position:relative;
float:left;
padding:5px;
background-color:#FFFFFF;
}
#VandaagLijst div.WorkorderBlock {
float:left;
position:relative;
margin:10px;
border:solid 1px #999999;
background-color:#EEEEEE;
width:918px;height:14px;margin:2px;
}
/**
PRINT VERSION
**/
#VandaagLijst div.WorkorderBlock span {
display:table;
float:left;
font-size:11px;
height:14px;
position:relative;
margin-right:5px;
overflow:hidden;
width:75px;
border:solid 1px red;
}
#VandaagLijst div.WorkorderBlock span.Pn {
font-weight:bold;
}
#VandaagLijst div.WorkorderBlock span.Description {
overflow:hidden;
}
#VandaagLijst div.WorkorderBlock span.RemarksAction {
display:none;
}
#VandaagLijst div.WorkorderBlock span.Shortages {
width:160px;
background-color:White;
overflow:visible;
}
/**
PRINT VERSION
**/
答案 0 :(得分：1)
将display：table属性赋予所有span。 需要更多的宽度游戏。 祝你好运
答案 1 :(得分：1)
将height:auto;放在.WorkorderBlock span.bigger
在上面的新代码之后编辑
从#VandaagLijst div.WorkorderBlock
中删除height:14px
从#VandaagLijst div.WorkorderBlock span
中删除height:14px和display:table
答案 2 :(得分：0)
可能你不应该使用浮动跨度。
如果一个块（span或div）浮动;它被取出正常流量，也就是说，它的大小不再计入包含块的大小。在你的情况下，使用相对位置可能是最好的。
阅读（部分）the CSS 2 specification可能是您的时间的一个很好的投资。
答案 3 :(得分：0)
Martijn对于漂浮物的高度没有计算是正确的。
然而，有一个解决办法：
<div id="9142" class="WorkorderBlock">
<span class="Workorder">S100580</span>
<span class="Pn">3616960-2</span>
...
...
<span class="bigger">3616967-1<br />3616967-1<br />
3616967-1<br />3616967-1<br />3616967-1<br /></span>
<div style="clear:both"></div>
</div>
注意每个WorkorderBlock div末尾带有“clear：both”样式的div。它将减轻跨度不被计算的高度的影响。
但我必须强烈建议使用表格：这就是制作表格的地方！
干杯！