Каким образом объединить один из блоков второй колонки с первой колонкой?
Всем привет.
Есть блок превью заказа, который разбит на 2 колонки:
1ая колонка - номер заказа, сумма
2ая колонка - информация о заказе (статус, ТК, текст, кнопки)
Во второй колонке есть блок order__description с текстом.
Необходимо: для мобильной версии блок order__description объединить с первой колонкой, т.е. чтобы текст был на всю ширину блока заказа.
В верстке данный блок не желательно перемещать, тк для декстоп данный блок должен выводиться между "Статус заказа" и "Транспортная компания"
Подскажите, пожалуйста, каким образом возможно реализовать?
Дополнительно:
Исходя из тега CSS GRID, и достаточно "не точного тз", ответ будет примерно такой (если я не правильно понял тз, то пример работы колонки "Описание заказа" - подскажет, как работать с другими колонками и рядами):
snippet
HTML:
<div class="order"> <div class="order__item order__item-number">Номер заказа</div> <div class="order__item order__item-sum">Сумма</div> <div class="order__item order__item-status">Статус заказа</div> <div class="order__item order__item-transport">Транспортная компания</div> <div class="order__item order__item-description">Описание заказа</div> <div class="order__item order__item-buttons">Кнопки</div> </div> |
<div class="order"> <div class="order__item order__item-number">Номер заказа</div> <div class="order__item order__item-sum">Сумма</div> <div class="order__item order__item-status">Статус заказа</div> <div class="order__item order__item-transport">Транспортная компания</div> <div class="order__item order__item-description">Описание заказа</div> <div class="order__item order__item-buttons">Кнопки</div> </div>
CSS:
/* desktop */ .order { display: grid; grid-template-columns: 1fr 1fr; /* two columns */ } .order__item { border: 1px solid black; padding: 10px; } /* first column */ .order__item-number, .order__item-sum { grid-column: 1; background-color: #f2f2f2; } /* two column */ .order__item-status, .order__item-transport, .order__item-description, .order__item-buttons { grid-column: 2; background-color: #e6e6e6; } /* modile */ @media (max-width: 768px) { .order__item-description { grid-column: 1 / span 2; /* span two columns */ background-color: #d4d4d4; } } |
/* desktop */ .order { display: grid; grid-template-columns: 1fr 1fr; /* two columns */ } .order__item { border: 1px solid black; padding: 10px; } /* first column */ .order__item-number, .order__item-sum { grid-column: 1; background-color: #f2f2f2; } /* two column */ .order__item-status, .order__item-transport, .order__item-description, .order__item-buttons { grid-column: 2; background-color: #e6e6e6; } /* modile */ @media (max-width: 768px) { .order__item-description { grid-column: 1 / span 2; /* span two columns */ background-color: #d4d4d4; } }
-
ответ будет примерно такой
- ответ прям в точку
Спасибо огромное )
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для объединения одного из блоков второй колонки с первой колонкой на сайте stackoverflow.com (или любом другом сайте) можно использовать HTML и CSS. Вот пример кода, который поможет вам достичь этой цели:
```html
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* Делим контейнер на две колонки */
gap: 20px; /* Расстояние между блоками */
}
.block1 {
grid-column: span 2; /* Объединяем блок с первой и второй колонкой */
background-color: #f0f0f0;
padding: 20px;
}
.block2 {
background-color: #e0e0e0;
padding: 20px;
}
Это блок 1
Содержимое блока 1
Это блок 2
Содержимое блока 2
```
В данном примере мы используем CSS-свойство `grid-column: span 2;` для блока с классом `.block1`, чтобы объединить его с первой и второй колонкой. Таким образом, содержимое этого блока будет занимать обе колонки.
Вы можете изменить стили блоков и расположение элементов с помощью CSS, чтобы достичь нужного вам внешнего вида. Надеюсь, этот пример поможет вам решить вашу проблему с объединением блоков на вашем сайте.