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>

Answer 2

这是一种简单的方法。

.a{
position:relative;
float:left;
height:40px;
width:40px;
border:1px solid;
}
.b{
position:relative;
float:left;
height:40px;
width:40px;
border:1px solid;
}
.c{
position:relative;
float:left;
height:80px;
width:40px;
border:1px solid;
}
.d{
position:relative;
float:left;
height:80px;
width:40px;
border:1px solid;
}

<div style="width:200px">
   <div  style="width:40px;float:left">
     <div class="a">
     Hello a
     </div>
     <div class="b">
     Hello b
     </div>
  </div>
  <div style="width:130px">
    <div class="c">
    Hello c
    </div>
    <div class="d">
    Hello d
    </div>
  </div>
</div>