html - DIV 元素的位置和文本

Question

我有一个关于 DIV 元素的问题。请查看此屏幕截图:

这就是我要实现的目标:

红色的 DIV 框具有相同的 css 类。有时在它们和 DIV "A"之间添加另一个 DIV "B"。在这种情况下，红色 DIV 应该更短，文本也应该更短(文本溢出:省略号)。

你能告诉我如何使用 CSS 告诉红色 DIV 框获得正确的宽度吗？

<div class="row">
<div class="left">
    <div class="group">Hello world!</div>
    <div class="group">Hello again!</div>
</div>
<div class="middle-left">
    <div>B</div>
    <div>A</div>
</div>

组的 CSS:

text-overflow: ellipsis;
white-space: nowrap !important;
width: ???????;

Answer 1

你可以使用 flexbox:

.wrapper {
  display: flex; /* Magic begins */
  width: 300px;
  border: 1px solid;
}
.a, .b, .red {
  border: 1px solid;
  margin: 5px;
  padding: 5px;
}
.a, .b {
  width: 80px;
  display: flex; /* Magic again */
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
}
.red-wrapper {
  flex: 1; /* Occupy available space */
  min-width: 0; /* Ignore content */
}
.red {
  white-space: nowrap; /* Prevent line breaks */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Show text ellipsis */
  background: #faa;
}

<div class="wrapper">
  <div class="red-wrapper">
    <div class="red">Hello world!</div>
    <div class="red">Hello again!</div>
  </div>
  <div class="a">A</div>
</div>
<hr />
<div class="wrapper">
  <div class="red-wrapper">
    <div class="red">Hello world!</div>
    <div class="red">Hello again!</div>
  </div>
  <div class="b">B</div>
  <div class="a">A</div>
</div>