如何使用响应式调整大小在HTML中重复字符？

Question

我正在尝试在DIV中创建要显示三个信息的行。左对齐文本，右对齐文本，并重复字符“。”在两者之间

我使用下面的HTML进行了尝试。但这不适用于每个部分的div。

 <div style="margin-bottom:5px"><!-- row 1 -->

    <div style="float:left;">Left</div> <!-- left column -->
    <div style="display: inline-block;">...</div> <!-- center column -->
    <div style="float:right;">Right</div> <!-- center column -->

  </div><!-- row 1 -->

我认为，最有可能必须使用一个div来显示一个文本/字符串，其中“。”。字符在其他两段文字之间重复。我无法弄清楚字符串随DIV大小的变化，以便保持响应速度。

Answer 1

您可以使用flexbox和虚线边框简单地实现这一目标。

.row { display: flex; }

.center {
  flex-grow: 1;
  border-bottom: 2px dotted black;
  margin: 0 4px 4px;
}

<div class="row">
  <div class="left">Left</div>
  <div class="center"></div>
  <div class="right">Right</div>
</div>

<div class="row">
  <div class="left">This is some longer left text</div>
  <div class="center"></div>
  <div class="right">Right</div>
</div>

<div class="row">
  <div class="left">Left</div>
  <div class="center"></div>
  <div class="right">This is some longer right text</div>
</div>

• 使父母成为display: flex，以使孩子并排对齐。
• 将flex-grow: 1添加到center，以便填充空白
• 添加border-bottom: 2px dotted black以实现虚线
• 添加一些边距以定位并正确填充虚线

Answer 2

您可以执行以下操作：

<div class="row>
    <div class="left">  Left  </div>
    <div class="middle"></div>
    <div class="right"> Right </div>
</div>

并使用flexbox设置尺寸：

.row           { display: flex; }
.left , .right { flex: 0 0 auto; } /* will not shrink or grow, with their default width set to auto */
.middle        { flex: 1 1 0; } /* will shrink/grow to fill all available space, with a default width of 0 */

现在，您可以应用类似的内容：

.middle {
    position: relative;
    border-bottom: 1px dotted currentColor;
    transform: translateY(-.4em); /* change to reposition vertically */
}

您还可以通过以下方式添加间距：

.left  { padding-right: 1em; }
.right { padding-left:  1em; }