Для решения данной задачи можно использовать несколько подходов. Ниже я предложу два наиболее распространенных метода.
1. Использование CSS Grid:
CSS Grid позволяет легко расположить элементы на сетке. Для того чтобы расположить два div элемента с одним классом на одной строке в разных частях экрана, мы можем создать сетку с двумя колонками и одной строкой.
В HTML разметке создаем контейнер div, в котором будут размещены наши элемены div:
<div class="container">
<div class="element"></div>
<div class="element"></div>
</div>
В CSS файле определяем стили для контейнера и его детей:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px; /* задаем промежуток между элементами */
}
.element {
/* остальные стили элементов */
}
В данном примере мы используем свойство grid-template-columns для определения двух равных колонок в нашей сетке, и свойство grid-gap для задания промежутка между элементами.
2. Использование CSS Flexbox:
CSS Flexbox является мощным инструментом для создания гибкого и адаптивного макета. Данный подход применяется, когда мы хотим расположить элементы внутри родительского контейнера.
В HTML разметке создаем контейнер div, в котором будут размещены наши элементы div:
<div class="container">
<div class="element"></div>
<div class="element"></div>
</div>
В CSS файле задаем стили для контейнера и его детей:
.container {
display: flex;
}
.element {
flex: 1; /* расширение элементов на всю ширину доступного пространства */
}
В данном примере мы используем свойство display: flex для настройки контейнера как гибкого контейнера, а свойство flex: 1 задает элементам класса .element равную ширину и распределяет их по ширине родительского контейнера.
Оба метода позволяют достичь требуемого результата, однако использование CSS Grid может быть более предпочтительным при работе с более сложными макетами, в то время как CSS Flexbox - для более простых ситуаций.