通过 CSS 在两个 div 元素之间显示内容

Question

我想在标签和价格之间显示一些“点”，如下所示：

from..........£2,000.49
total........£20,000.00

但是，如果价格的长度增加，点必须是“adapt/reduce/increase”。（如上例所示），因为价格是动态的，而不是 static/hardcoded.

我想我会用 flex 试试这个。我在下面有一个工作示例，其中我有两列，两行。

上面没有宽度.price-big class,所以这些div的宽度increases/decreases,加上数字的长度.

然后我将点添加到 label class。但是，这会将我的 div 推到单独的 lines/stacked 上，如下例所示。

.label {
    content: ".............................................";
}

关于如何实现这一点的任何想法都会有所帮助，因为我有点陷入困境。

谢谢，瑞玛

.main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    border: 1px solid green;
    width: 200px;
}

.label {
    font-size: 14px;
    /* flex: 0 50%; */
    flex-basis: 50%;
    flex-shrink: 1;
    flex-grow: 1;
    border: 1px red solid;
    /* width: 100%; */
    text-align: left;
    font-size: 14px;
}

.label:after {
    content: ".............................................";
}


.price-big {
    flex-basis: 0;
    flex-shrink: 1;
    flex-grow: 1;
    border: 1px red solid;
    text-align: right;
    font-size: 20px;
}

<div class="main">
  <div class="label">price</div>
  <div class="price-big total">£2,000.49</div>
  <div class="label">total</div>
  <div class="price-big">£20,000.00</div>
</div>

Answer 1

天哪，我在发布这篇文章后一分钟就找到了答案。我将 overflow: overlay; 添加到 label class:

.label {
    font-size: 14px;
    flex-basis: 50%;
    flex-shrink: 1;
    flex-grow: 1;
    border: 1px red solid;
    text-align: left;
    font-size: 14px;
    overflow: overlay; <--- added this
}

.main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    border: 1px solid green;
    width: 200px;
}

.label {
    font-size: 14px;
    /* flex: 0 50%; */
    flex-basis: 50%;
    flex-shrink: 1;
    flex-grow: 1;
    border: 1px red solid;
    /* width: 100%; */
    text-align: left;
    font-size: 14px;
    overflow: overlay;
}

.label:after {
    content: ".............................................";
}


.price-big {
    flex-basis: 0;
    flex-shrink: 1;
    flex-grow: 1;
    border: 1px red solid;
    text-align: right;
    font-size: 20px;
}

<div class="main">
  <div class="label">price</div>
  <div class="price-big total">£2,000.49</div>
  <div class="label">total</div>
  <div class="price-big">£20,000.00</div>
</div>

Answer 2

您可以结合使用 float 和 flex 来修改非浮动元素的格式化上下文布局，并使用伪元素填充其中的空白 space:

您的 CSS 代码已修改：

.main {
    /*display: flex;
    flex-wrap: wrap;
    align-items: baseline;*/
    border: 1px solid green;
    width: 200px;
    overflow:hidden; /* because of the float label */
}

.label {
    font-size: 14px;
    /* flex: 0 50%;
    flex-basis: 50%;
    flex-shrink: 1;
    flex-grow: 1; */
    border: 1px red solid;
    /* width: 100%; 
    text-align: left;*/
    font-size: 14px;
    margin-top:0.4em;
    float:left;
    clear:left;
}
 


.price-big { 
    border: 1px red solid; 
    font-size: 20px;
    display:flex;
}
.price-big:before {
content:'';
border-bottom:dotted;
margin-bottom:0.2em;
flex-grow:1;
}

<div class="main">
  <div class="label">price</div>
  <div class="price-big total">£2,000.49</div>
  <div class="label">total</div>
  <div class="price-big">£20,000.00</div>
</div>

通过 CSS 在两个 div 元素之间显示内容

Display content in between two div elements via CSS

html

css

flexbox

pseudo-element

pseudo-class