仅使用 CSS 将行扩展到全宽

Question

也许有人有什么好主意如何仅通过 CSS 替换我目前对其中一个问题的解决方案？我有一个有效的 JS 解决方案，只是好奇是否有 CSS-only 一个。

A）这里的元素宽度相同，只是元素的个数有变化（可多可少）。

B) 该行应该展开到全宽，此处留空（问题出在这里）。

C) 文本是动态的（总是其他宽度）。

是否可以设置 B) 元素，使其填充宽度？

Answer 1

是的，使用 Flexbox 是可能的，您只需在线路上设置 flex: 1，他们将占用剩余的免费 space。

.content,
.a {
  display: flex;
  align-items: center;
}
.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: red;
}
.line {
  flex: 1;
  border-bottom: 1px dashed black;
}

<div class="content">
  <div class="a">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="line"></div>
  <div class="text">Lorem ipsum.</div>
  <div class="line"></div>
  <div class="text">Text</div>
</div>

仅使用 CSS 将行扩展到全宽

Expanding line to full width with only CSS

html

css

fluid-layout