如何强制div出现在streched div后 [英] How to force div to appear after streched div
本文介绍了如何强制div出现在streched div后的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
html顺序是从模板生成的。
示例输出如下。
html order is generated from template. Sample output is below.
每行中的元素都有固定的位置和大小。这是使用包含具有绝对位置的字段div的
行div实现的。
Elements in each row have fixed positions and sizes. This is implemented using row div containing field div with absolute position.
描述元素被定义为
<div class='row' style='height:0.5cm;'>
<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 - Windows 7 Professional 64-bit Edition / Windows 10 Pro 64-bit Edition downgrade - pre-installed: Windows 7</div>
</div>
有时项目描述很长，应该换行。为此，我尝试使用
Sometimes item description is long and should wrap into multiple lines. For this I tried to remove heights from divs by using
<div class='row'>
<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-bit Edition / Windows 10 Pro 64-bit Edition downgrade - pre-installed: Windows 7</div>
</div>
下一行不会自动向下移动。第一行项目描述覆盖下一行项目名称：
Next row does not move down automatically. First row item description overwrites next row item name:
如何修复这个，以便下一行appers后可变高度描述？
使用硬编码的更高的高度，如
How to fix this so that next row appers after variable height description ? Using hard-coded bigger heights like
<div class='row' style='height:1.5cm;'>
<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 - Windows 7 Professional 64-bit Edition / Windows 10 Pro 64-bit Edition downgrade - pre-installed: Windows 7</div>
</div>
修复问题，但是很难计算正确的高度，因为它取决于div内容，宽度，字体尺寸等，并且在行中有多个列
如何强制浏览器正确渲染？
html5，使用ASP.NET MVC4和Razor视图。
Fixes the issue but it is fdifficult to calculate correct height since it depends on div content, width, font sizes etc and there are multiple columns in row How to force browser to render this properly ? html5, ASP.NET MVC4 and Razor views are used.
更新
预期结果可以使用硬编码高度生成
Expected result can produced using hard coded heights
<div class='row' style='height:1.5cm;'>
<div class='field' style='left:2.24cm;width:9.79cm;height:1.4cm'>
并且
**更新2 **
我试图使用相对位置和min-高度推荐在回答使用下面的代码。这导致每个字段在单独的行中apper。
I tried to use relative position and min-height as recommended in answer using code below. This causes every field to apper in separate row. How to fix this so that multiple fields can appear nearly in same row like with absolute positioning ?
如果下面的样式更改为
.horizontalline, .field {
position: absolute;
}
字段显得非常繁琐，但缩略原因重叠。
fields appear poperly but strech causes overlap.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.row {
position: relative;
clear: both;
}
.field {
overflow: hidden;
word-break: break-all;
}
.horizontalline {
font-size: 1pt;
border: 1px solid #000000;
}
.horizontalline, .field {
position: relative;
}
.horizontalline {
border-bottom-style: none !important;
}
</style>
</head>
<body>
<div class='row' style='min-height:0.05cm;'>
<div class='horizontalline' style='left:1.11cm;width:19.05cm;height:0.00cm;border-color:#C0C0C0;'></div>
</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><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 - Micro tower - 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;color:#000000;'>31.12.2015</div>
</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;color:#000000;'>1</div>
</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>
</div>
<div class='row' style='min-height:0.00cm;'>
<div class='field' style='left:14.32cm;width:1.26cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'></div>
</div>
<div class='row' style='min-height:0.00cm;'>
</div>
<div class='row' style='min-height:0.00cm;'>
<div class='field' style='left:16.61cm;width:1.42cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;text-align:right;color:#000000;'>1189</div>
</div>
<div class='row' style='min-height:0.42cm;'>
<div class='field' style='left:17.79cm;width:2.00cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;font-weight:bold;text-align:right;color:#000000;'>1189</div>
</div>
<div class='row' style='min-height:0.51cm;'>
<div class='field' style='left:2.24cm;width:9.79cm;min-height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>RAM 16 GB - SSD 256 GB - DVD SuperMulti - GF GT 730M / HD Graphics 530 - GigE - Windows 7 Professional 64-bit Edition / Windows 10 Pro 64-bit Edition downgrade - pre-installed: Windows 7</div>
</div>
<div class='row' style='min-height:0.05cm;'>
<div class='horizontalline' style='left:1.11cm;width:19.05cm;height:0.00cm;border-color:#C0C0C0;'></div>
</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;'> 2</div>
</div><div class='row' style='min-height:0.00cm;'>
<div class='field' style='left:2.05cm;width:8.47cm;min-height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>24x7 monitor: LG 32SL5B</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;color:#000000;'>29.12.2015</div>
</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;color:#000000;'>3</div>
</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>
</div>
<div class='row' style='min-height:0.00cm;'>
<div class='field' style='left:14.32cm;width:1.26cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>878,79</div>
</div>
<div class='row' style='min-height:0.00cm;'>
</div>
<div class='row' style='min-height:0.00cm;'>
<div class='field' style='left:16.61cm;width:1.42cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;text-align:right;color:#000000;'>580</div>
</div>
<div class='row' style='min-height:0.42cm;'>
<div class='field' style='left:17.79cm;width:2.00cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;font-weight:bold;text-align:right;color:#000000;'>1740</div>
</div>
<div class='row' style='min-height:0.51cm;'>
<div class='field' style='left:2.24cm;width:9.79cm;min-height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>450cd/m2, HDMI / DP / DVI / RGB / RJ45 /etc, 24/7 Operation, laos</div>
</div>
<div class='row' style='min-height:0.05cm;'>
<div class='horizontalline' style='left:1.11cm;width:19.05cm;height:0.00cm;border-color:#C0C0C0;'></div>
</div>
</body>
</html>
输出为：
推荐答案
尝试：
strong>您的HTML：
Your HTML:
<div class='row' >
<div class='field'></div>
<div class='field' >
HP ProDesk 490 G3 - Micro tower - 1 x Core i7 6700
</div>
<div class='field'>tk</div>
<div class='field' >1189</div>
<div class='field'>1189</div>
</div>
<div class='row' >
<div class='field'>RAM 16 GB - SSD 256 GB - DVD SuperMulti - GF GT 730M / HD Graphics 530 - GigE - Windows 7 Professional 64-bit Edition / Windows 10 Pro 64-bit Edition downgrade - pre-installed: Windows 7</div>
</div>
<div class='row' >
<div class='horizontalline' ></div>
</div>
<div class='row' >
<div class='field'>2</div>
<div class='field' >24x7 monitor: LG 32SL5B</div>
</div>
您的CSS：
<style>
* {
margin: 0;
padding: 0;
}
.row {
clear: both;
width: 100%;
}
.field {
width: 20%;
font-family: "Times New Roman";
font-size: 10pt;
background-color: transparent;
overflow: hidden;
float: left;
}
</style>
这篇关于如何强制div出现在streched div后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
