如何强制div在拉伸div

时间：2015-12-24 16:32:06

标签： html css html5

html订单是从模板生成的。 样本输出如下。

每行中的元素都有固定的位置和大小。这是使用 包含绝对位置的字段div的行div。

描述元素定义为

<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>

有时项目描述很长，应该包含多行。为此，我尝试使用

从div中删除高度 
<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>

下一行不会自动向下移动。第一行项目描述将覆盖下一个行项目名称：

overlap

如何修复此问题，以便下一行在变量高度描述后出现？ 使用硬编码的更高的高度，如

<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视图。

更新

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

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

并且是

expected

**更新2 **

我尝试使用相应位置和最小高度，如下面的代码所示。这会导致每个字段在单独的行中显示。如何解决这个问题，以便多个字段几乎可以像绝对定位一样出现在同一行？

如果以下样式更改为

    .horizontalline, .field {
        position: absolute;
    }

字段显示较差但strech导致重叠。

<!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>

输出是：

s

1 个答案:

答案 0 :(得分：1)

试试这个：

您的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>
相关问题
最新问题