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

如何解决通过 CSS 在两个 div 元素之间显示内容

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

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

但是，如果价格的长度增加，点必须“适应/减少/增加”。 （如上例所示），因为价格是动态的，而不是静态/硬编码的。

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

.price-big 类上没有宽度，因此这些 div 的宽度随着数字的长度增加/减少。

然后我将这些点添加到 label 类中。但是，这会将我的 div 推到单独的行/堆叠上，如下例所示。

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

解决方法

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

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

,

天哪，我在发布此内容后一分钟就找到了答案。我将 overflow: overlay; 添加到 label 类：

.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.00</div>
</div>