Для того чтобы расположить по два блока в одной строке, можно воспользоваться различными способами. Ниже приведены несколько вариантов:
1. **Flexbox**:
Используя свойства CSS flexbox, можно легко распределить элементы в ряд. Для этого нужно задать для контейнера следующие стили:
.container { display: flex; flex-wrap: wrap; }
Затем для каждого блока, которого вы хотите разместить в строке, нужно задать ширину, например, 50%:
.block { width: 50%; }
2. **Grid**:
Если ваш проект поддерживает CSS Grid, вы можете воспользоваться этим способом. Для этого необходимо задать стили для контейнера следующим образом:
.container { display: grid; grid-template-columns: repeat(2, 1fr); }
3. **Inline-block**:
Другой вариант - использовать свойство display: inline-block
для блоков и установить им ширину. При этом не забудьте учесть пробелы между элементами в HTML, которые могут вызвать нежелательные отступы.
.block { display: inline-block; width: 50%; box-sizing: border-box; /* учитывать padding и border в ширине */ }
4. **Bootstrap**:
Если вы используете фреймворк Bootstrap, можно воспользоваться его классами для создания сетки. Например:
<div class="row"> <div class="col-md-6">Блок 1</div> <div class="col-md-6">Блок 2</div> </div>
В данном примере блоки автоматически будут занимать по 50% ширины в строке на разрешениях medium и выше.
Надеюсь, что эти примеры помогут вам разместить по два блока в строке на вашей веб-странице.