Как задать одинаковую ширину для элементов в различных блоках?

Question

Мар

html , css

Как задать одинаковую ширину для элементов в различных блоках?

Здравствуйте. <br/> Как можно установить одинаковую ширину элементов в различных блоках? <br/> Вот код: <a href="https://jsfiddle.net/pm0v6hkb/" rel="nofollow">https://jsfiddle.net/pm0v6hkb/</a> <br/> <br/> У меня есть два блока: в одном находятся заголовки, а в другом — значения. Эти блоки расположены в разных местах. Как добиться того, чтобы все блоки сжимались до минимальной ширины в соответствии с контентом внутри них, а блок №4 (Описание) занимал всю ширину? <br/> <br/> <b>Пример в виде таблицы:</b> <br/>

22 ноября 2024 г. 19:43

Ответы на вопрос 2

Похожие вопросы

Answer 1

Чтобы установить одинаковую ширину для элементов в различных блоках и при этом сделать так, чтобы блоки сжимались до минимальной ширины в соответствии с контентом, а один из блоков занимал всю ширину, вы можете использовать CSS Flexbox или CSS Grid. Ниже приведен пример, как сделать это с помощью Flexbox.

### HTML пример
```html
<div class="container">
    <div class="item header">Заголовок 1</div>
    <div class="item header">Заголовок 2</div>
    <div class="item header">Заголовок 3</div>
    <div class="item header">Заголовок 4</div>
    
    <div class="item value">Значение 1</div>
    <div class="item value">Значение с длинным текстом 2</div>
    <div class="item value">Значение 3</div>
    <div class="item value">Значение 4</div>
</div>
<div class="description">Описание, занимающее всю ширину.</div>
```

### CSS пример
```css
.container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.item {
    flex: 1; /* Устанавливает гибкую ширину */
    min-width: 0; /* Позволяет уменьшать элемент до минимальной ширины */
    margin: 5px; /* Отступы между элементами */
    text-align: center;
    border: 1px solid #000; /* Для визуального отображения */
}

.description {
    width: 100%; /* Занимает всю ширину */
    border: 1px solid #000; /* Для визуального отображения */
    margin-top: 10px; /* Отступ сверху */
    text-align: center;
    padding: 10px; /* Внутренний отступ */
}
```

### Объяснение
1. **Flexbox**: `display: flex;` используется для создания флекс-контейнера, где дочерние элементы будут гибкими.
2. **`flex: 1;`**: Для каждого элемента используется `flex: 1;`, что позволяет им занимать равное пространство. Все дочерние элементы .item в контейнере `.container` будут сжиматься до одинаковой ширины.
3. **`min-width: 0;`**: Это свойство позволяет элементам сжиматься до минимальной ширины, если контент в них слишком длинный.
4. **Блок Описания**: Блок с описанием установлен на 100% ширину, что позволяет ему занимать всю доступную ширину.

Этот подход гарантирует, что элементы в различных блоках будут занимать одинаковую ширину, а блок описания займет всю ширину. Вы можете дополнительно настроить стили под свои нужды.

Answer 2

если сильно хочется пострадать садомазо и уровень поддержки устраивает, то можно попробовать Subgrid :