个人中心
gpt4 book ai didi

css - 如何在拉伸(stretch)div后强制出现div

转载 作者：行者123 更新时间：2023-11-28 16:36:26 27 4
gpt4 key购买 nike

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

更新

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

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

字段出现得很好，但拉伸(stretch)会导致重叠。

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

最佳答案

试试这个:

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

关于css - 如何在拉伸(stretch)div后强制出现div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34455552/

27 4 0
文章推荐： html - 将

标题移动到导航栏上方

文章推荐： python - Flask:一段时间后服务器变得无响应
文章推荐： javascript - 使用 javascript 隐藏 IFRAME 滚动条
文章推荐： python - Flask-Admin:可以搜索 hybrid_property 吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com