Положение и текст элементов DIV

Question

У меня есть вопрос относительно элементов DIV. Пожалуйста, посмотрите на этот скриншот:

Это то, что я пытаюсь достичь:

красные DIV ящики имеют один и тот же CSS-класс. Иногда между ними и DIV «A» добавляется еще один DIV «B». В этом случае красный DIV должен быть короче и текст также должен быть сокращен (переполнение текста: многоточие).

Не могли бы вы рассказать мне, как я могу сказать красным DIV-боксам, чтобы получить правильную ширину с помощью CSS?

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