在第二个 div 上给出边框底部 [重复]

Posted 2023-03-05

【中文标题】在第二个 div 上给出边框底部 [重复]

【英文标题】：Give border bottom on the second div [duplicate]

【发布时间】：2020-01-06 00:58:33

【问题描述】：

我有两个 DIV-s，它们必须填充它们上部 div 的空间。第一个 div 的大小可以不同 - 取决于 div 内的文本。我想要的是在剩余空间的末尾显示点。

我的解决方案：

.drugi 
  border: 1px dashed black;

<div>
  <div>this is testing</div>
  <div class="drugi"></div>
</div>

问题是输出：

点占据了整个空间。我希望它是这样的：

请注意：我已经尝试过this 和this 等解决方案。我的问题不同，因为我没有固定宽度的任何一个 DIV-s，所以第二个 DIV 必须简单地用点填充剩余空间，而不与第一个 DIV 重叠。

【问题讨论】：

了解css Ellipsis

省略号在末尾添加三个点，这不是我要找的。我想用点填充整个剩余空间。

【参考方案1】：

试试这个：

html：

<div class="Table">
    <div class="row">
       <div class="Table_title">this is testing</div>
       <div class="Table_border"></div> 
    </div>
</div>

CSS：

.Table .row 
  display: table;
  padding-bottom: 10px;

.Table_title
  display: table-cell;
  white-space: nowrap;

.Table_border
  border-bottom: 1px dashed black;
  width: 100%;
  display: table-cell;

【参考方案2】：

使用Flex

.outer
display:flex;

.drugi
  border-bottom:1px dashed black;   
  flex:1;

<div class="outer">
  <div>this is testing this is testing</div>
  <div class="drugi"></div>  
</div>

【讨论】：

你为什么使用：flex:1？

Why are you using: flex:1 带盖铰孔

【参考方案3】：

您可以使用flexbox。

.drugi
    border-bottom: 1px dashed black;
    flex: auto; 

.d-flex 
    display: flex;

<div class="d-flex">
  <div>this is testing</div>
  <div class="drugi"></div>  
</div>


<div class="d-flex">
  <div>this is</div>
  <div class="drugi"></div>  
</div>