Я знаю, что есть несколько похожих постов, но я прочитал более 20, и решения, которые я нашел, не помогают мне.
Некоторые из моих материалов имеют макет, похожий на тот, который я подробно здесь:
Пример Fiddle
Есть контейнер div "Полоска" , содержащая 3 дочерних элемента div; img title description. Содержимое div имеет фиксированную ширину 944 пикселя.
- Первый div
img имеет фиксированный размер. Это отлично работает. - Второй div
title должен автоматически изменить размер в соответствии с длиной заголовка. Это отлично работает. - Третий div
description должен заполнить остаток неиспользованного Strip Div без переполнения . Это не работает.
Я смогу заставить его работать, если установить для description div фиксированный размер, но это не поможет, так как размер будет меняться в зависимости от длины заголовка.
Я уверен, что это очень просто, но я прошел через много итераций без удачи.
CSS:
font-weight: bold;
}
.strip {
width: 944px;
max-width: 944px;
display: inline-block;
border: Solid;
border-width: 2px;
max-height: 28px;
white-space: nowrap;
}
.img {
display: inline-block;
border: solid;
border-width: 1px;
border-color: red;
max-width: 50px;
max-height: 28px;
height: 28px;
white-space: nowrap;
text-wrap: hidden;
}
.img p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.title {
display: inline-block;
border: solid;
border-width: 1px;
border-color: green;
max-height: 28px;
}
.title p {
white-space: nowrap;
overflow: hidden;
}
.description {
display: inline-block;
border: solid;
border-width: 1px;
border-color: blue;
max-height: 28px;
}
.description p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}```
**HTML:**
```<html>
<div class="strip">
<div class="img">
<p>
Test
</p>
</div>
<div class="title">
<p>
Rotten Tomatoes
</p>
</div>
<div class="description">
<p>
Rotten Tomatoes, home of the Tomatometer, is the most trusted measurement of quality for Movies & TV. Rotten Tomatoes, home of the Tomatometer, is the most trusted measurement of quality for Movies & TV.
</p>
</div>
</div>
</html>```