如何在环绕文本后添加内容

Question

报表生成器在 html 中使用绝对定位创建订单以保留报表设计器的精确布局。

订单行包含产品描述和价格。订单行后其他内容有横线。如果产品描述换行，则在产品描述行之间出现水平线：

如何解决此问题，以便在产品描述后出现水平线。绝对定位和硬编码宽度不能轻易改变，所以它们应该保留。是否可以使用内联布局或其他方式强制 div 包含在先前内容之后呈现的水平线？

行 class 有 position: relative 但由于未知原因，产品描述后没有出现水平线。

<html>
<head>
<style>

.row {
  position: relative;
  clear: both;
}

.field-stretch {
  position: absolute;
}

.horizontalline {
  border: 1px solid #000000;
  position: relative;
  display: inline-block;
}

.field {
  position: absolute;
}    </style>
</head>

<body>

 <div class='row'>
<div class='field-stretch' style='width:9cm;'>Content wrapped to multiple rows aaaaaaaaa bbbbbbbbbbb ccccccccc</div>
  </div>

  <div class='row' style='min-height:0.5cm'>
<div class='field' style='left:8cm;width:2cm'>186</div>
  </div>

  <div class='row'>
<div style='width:9cm' class='horizontalline'></div>
  </div>
</body>
</html>

Answer 1

让 horizontalline 出现在下方。只需在 class 上使用 position: relative; 和 display: inline-block;。您还可以添加一个 top 值来稍微清理一下。

.row {
  position: relative;
  clear: both;
}

.field-stretch {
  position: relative;
}

.horizontalline {
  border: 1px solid #000000;
  position: relative;
  /*display: inline-block; for additional spacing betwen content and line */
}

.field {
  position: relative;
}

body > .row:nth-child(1) {
  display: flex;
  align-items: center;
}

<html>

<head>
</head>

<body>
  <div class='row'>
    <div class='field-stretch' style='width:9cm;'>Content wrapped to multiple rows aaaaaaaaa bbbbbbbbbbb ccccccccc kkkkkkkkkkkkkkkkkkkkk</div>
    <div class='field' style='width:2cm'>186</div>
  </div>
  <div class='row'>
    <div style='width:9cm' class='horizontalline'></div>
  </div>
</body>

</html>

编辑 ~ 我最终会这样做。这不包括最高值或奇怪的利润率。此外，绝对会导致问题，尤其是在尝试根据内容寻找响应式内容时。我调整了您的第一行并添加了更多文本以证明它正在填满可用 space。接下来，align-items: center; 将使该字段与产品描述保持一致，不管它有多长。最后，您可以取消注释行下的 d-inline-block 以获得一些间距。 LMK 如果您还有其他问题。

如何在环绕文本后添加内容

How to add content after wrapped text

html

css

css-position

flexbox