html - 对齐3列，中间列HR可调

Question

我有这个部分：

我想要实现的是左侧跨度，右侧有填充，然后是 HR 中间，右侧是价格跨度，但我希望价格与右侧对齐，并使 HR 可调，因此它始终以价格结束并在第一个跨度之后开始。无论我尝试什么，我都无法实现这一目标。

这是代码：

    <div class="ementaspan"><span class="span1"><h5 class="font-150690 h5 font-weight-600 text-color-118181-color" style="
    display:  inline-block;
"><span>Creme de Baunilha</span></h5></span> <span><hr class="dotted border-accent-color separator-no-padding" style="width: 90%;border-top-width: 4px;"></span><span class="span3"><h5 class="font-150690 h5 font-weight-300"><span>1,60€&lt;/span></h5></span></div>

纳塔奶油 1,60€

和CSS：

.ementaspan span h5, .ementaspan hr {
    display: inline-block !important;
}


.ementaspan {
    text-align: left !important;
}

.ementaspan .span1 {
    width: 25% !important;
}

.ementaspan .span1 h5 {
    padding-right: 25px;
}

.ementaspan hr {
    width: 50% !important;
}
.ementaspan .span3 {
    width: 25% !important;
}

.ementaspan .span3 h5 {
    padding-left: 25px;
}

标签： htmlcss

Answer 1

最简单的方法是使用 flex

.maindiv {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
}
.maindiv .div1 {
  padding-right: 20px;
}
.maindiv .div2 {
  flex: 1 1 auto;
}
.maindiv .div2 hr {
  height: 0;
  background: none;
  color: transparent;
  border-bottom: 3px dotted #f00;
  border-top: none !important;
  margin: 0 0 4px !important;
}
.maindiv .div3 {
  padding-left: 20px;
  color: #f00;
}

<div class="maindiv">
  <div class="div1">Creme de Baunilha</div>
  <div class="div2"><hr></div>
  <div class="div3">1,60€&lt;/div>
</div>
<div class="maindiv">
  <div class="div1">Creme de Nata</div>
  <div class="div2"><hr></div>
  <div class="div3">11,60€&lt;/div>
</div>
<div class="maindiv">
  <div class="div1">Baunilha e Noz</div>
  <div class="div2"><hr></div>
  <div class="div3">1,60€&lt;/div>
</div>
<div class="maindiv">
  <div class="div1">Baunilha e Cookies</div>
  <div class="div2"><hr></div>
  <div class="div3">121,60€&lt;/div>
</div>