Fatal编程技术网
  • css/
  • Css 如何在拉伸div后强制显示div

Css 如何在拉伸div后强制显示div

css html

Css 如何在拉伸div后强制显示div,css,html,Css,Html,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 / H

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>
字段看起来很流行，但拉伸会导致重叠

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


* {
保证金：0；
填充：0；
}
.行{
位置：相对位置；
明确：两者皆有；
}
.场{
溢出：隐藏；
单词break：打破一切；
}
.水平线{
字号：1pt；
边框：1px实心#000000；
}
.horizontalline，.field{
位置：相对位置；
}
.水平线{
边框底部样式：无！重要；
}
1.
HP ProDesk 490 G3-微型塔-1个核心i7 6700
31.12.2015
1.
传统知识
1189
1189
RAM 16 GB-SSD 256 GB-DVD SuperMulti-GF GT 730M/HD Graphics 530-GigE-Windows 7专业版64位版本/Windows 10 Pro 64位版本降级-预装：Windows 7
2.
全天候监视器：LG 32SL5B
29.12.2015
3.
传统知识
878,79
580
1740
450cd/m2，HDMI/DP/DVI/RGB/RJ45/etc，24/7运行，老挝
输出为：

试试这个：

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

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


HP ProDesk 490 G3-微型塔-1个核心i7 6700
传统知识
1189
1189
RAM 16 GB-SSD 256 GB-DVD SuperMulti-GF GT 730M/HD Graphics 530-GigE-Windows 7专业版64位版本/Windows 10 Pro 64位版本降级-预装：Windows 7
2.
全天候监视器：LG 32SL5B
您的CSS:

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

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


* {
保证金：0；
填充：0；
}
.第{
明确：两者皆有；
宽度：100%；
}
.场{
宽度：20%；
字体系列：“新罗马时代”；
字号：10pt；
背景色：透明；
溢出：隐藏；
浮动：左；
}
据我所知，问题出现在
位置：绝对
的
字段中。但移除它会破坏布局。那么，你能添加一张图片或者描述一下它应该是什么样子吗？你期望的结果是什么？你能告诉我你为什么要使用positing吗？我不明白重点。另外，您的
.row
元素需要包装在另一个元素中，该元素将是一个容器。@devpro I更新了问题并添加了预期结果。订单布局是使用报表设计器创建的，报表设计器为行创建固定位置和大小。绝对位置应用于在html中显示此布局。然而，对于长描述，描述元素应该自动拉伸。@SergiyT。我更新了问题并添加了预期结果。这假设每个字段宽度为20%。实际上，字段维度和位置是在GUI报表设计器中使用绝对坐标指定的。因此，这无法使用。您必须固定宽度，否则引导是一个选项。报告布局已经由GUI设计人员在客户站点中创建。应用程序必须使用它们。不可能更改每个客户设计的布局。应创建Mvc4应用程序，该应用程序从现有布局生成可打印的html。它试图使用相对位置，就像在您的答案中一样，但字段现在位于单独的行中。如何确定这一点？我用新的测试用例更新了这个问题。好吧，与当前的html相比，我们需要为特定的div更多地使用css类。好吧，我在不知道场景的情况下尽了最大努力，很好地满足了用户界面的要求，将此作为单独的问题发布在

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



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