如何强制div在拉伸后出现 [英] How to force div to appear after stretched div

问题描述

html 订单是从模板生成的.示例输出如下.

每一行的元素都有固定的位置和大小.这是使用实现的包含具有绝对位置的字段 div 的行 div.

描述元素定义为

<div class='field' style='left:2.24cm;width:9.79cm;height:0.4cm'>RAM 16 GB - SSD 256 GB - DVD SuperMulti - GF GT 730M/HD Graphics 530 - GigE - Windows7 专业版 64 位版/Windows 10 专业版 64 位版降级 - 预装:Windows 7</div>

有时项目描述很长，应该分成多行.为此，我尝试使用

从div中删除高度

<div class='field' style='left:2.24cm;width:9.79cm'>RAM 16 GB - SSD 256 GB - DVD SuperMulti - GF GT 730M/HD Graphics 530 - GigE - Windows 7 Professional 64 位版本/Windows 10 Pro 64 位版本降级 - 预装:Windows 7</div>

下一行不会自动向下移动.第一行项目描述覆盖下一行项目名称:

如何解决这个问题，以便在可变高度描述之后显示下一行?使用硬编码的更大的高度，如

<div class='field' style='left:2.24cm;width:9.79cm;height:1.4cm'>RAM 16 GB - SSD 256 GB - DVD SuperMulti - GF GT 730M/HD Graphics 530 - GigE - Windows7 专业版 64 位版/Windows 10 专业版 64 位版降级 - 预装:Windows 7</div>

修复了问题，但很难计算正确的高度，因为它取决于 div 内容、宽度、字体大小等，并且行中有多个列如何强制浏览器正确呈现?使用 html5、ASP.NET MVC4 和 Razor 视图.

更新

使用硬编码高度可以产生预期的结果

<div class='field' style='left:2.24cm;width:9.79cm;height:1.4cm'>

而且是

**更新 2 **

我尝试使用以下代码在回答中建议使用相对位置和最小高度.这会导致每个字段都在单独的行中.如何解决这个问题，以便多个字段可以像绝对定位一样出现在几乎同一行中?

如果下面的样式改为

 .horizo​​ntalline, .field {位置:绝对；}

字段看起来很流行，但拉伸会导致重叠.

<头><风格>* {边距:0；填充:0；}.排 {位置:相对；清楚:两者；}.场地 {溢出:隐藏；断字:断断续续；}.horizo​​ntalline {字体大小:1pt；边框:1px 实心 #000000；}.horizo​​ntalline, .field {位置:相对；}.horizo​​ntalline {边框底部样式:无！重要；}</风格><身体><div class='row' style='min-height:0.05cm;'><div class='horizo​​ntalline' style='left:1.11cm;width:19.05cm;height:0.00cm;border-color:#C0C0C0;'></div>

<div class='row' style='min-height:0.00cm;'><div class='field' style='left:1.26cm;width:0.71cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>1

</div><div class='row' style='min-height:0.00cm;'><div class='field' style='left:2.05cm;width:8.47cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>HP ProDesk 490 G3 - 微型塔式 - 1 x Core i7 6700</div></div><div class='row' style='min-height:0.00cm;'><div class='field' style='left:10.58cm;width:1.68cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;text-align:right;颜色:#000000;'>31.12.2015

</div><div class='row' style='min-height:0.00cm;'><div class='field' style='left:12.24cm;width:0.79cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;text-align:right;颜色:#000000;'>1

</div><div class='row' style='min-height:0.00cm;'><div class='field' style='left:13.08cm;width:1.08cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>tk</div>