Как сделать чтобы было по 2 блока в строке?
Уже и пробовал flex-wrap:wrap( Но мне не нужно чтобы было по одному блоку на строке, нужно чтобы было по 2 блока на строке.
<section class="Lots-of-blocks"> <div class="container"> <div class="lots-of-block_blocks"> <div class="lots-of-block_window"> <img class="lots-of-block_img" src="images/imgcrem1.jpeg" alt="" /> </div> <div class="lots-of-block_window"> <p class="lots-of-block_pretitle">High Performance</p> <h2 class="lots-of-block_title">It works, we pinky promise.</h2> <p class="lots-of-block_main-text"> We know that if your personal care products don't make your hair and skin feel amazing, nothing else matters. </p> <p class="lots-of-block_additional-text"> We have high expectations of our hair and body care and our formulas won't disappoint. From a deep cleansing lather to our signature fresh scent, we've captured the sensorial shower experience you love. </p> <a href="" class="lots-of-block_link"></a> </div> <div class="lots-of-block_window"> <p class="lots-of-block_pretitle"></p> <h2 class="lots-of-block_title"></h2> <p class="lots-of-block_main-text"></p> <p class="lots-of-block_additional-text"></p> <a href="" class="lots-of-block_link"></a> </div> <div class="lots-of-block_window"></div> <div class="lots-of-block_window"> <img class="lots-of-block_img" src="images/imgcrem2.jpeg" alt="" /> </div> <div class="lots-of-block_window"> <p class="lots-of-block_pretitle"></p> <h2 class="lots-of-block_title"></h2> <p class="lots-of-block_main-text"></p> <p class="lots-of-block_additional-text"></p> <a href="" class="lots-of-block_link"></a> </div> </div> </div> </section> |
<section class="Lots-of-blocks"> <div class="container"> <div class="lots-of-block_blocks"> <div class="lots-of-block_window"> <img class="lots-of-block_img" src="images/imgcrem1.jpeg" alt="" /> </div> <div class="lots-of-block_window"> <p class="lots-of-block_pretitle">High Performance</p> <h2 class="lots-of-block_title">It works, we pinky promise.</h2> <p class="lots-of-block_main-text"> We know that if your personal care products don't make your hair and skin feel amazing, nothing else matters. </p> <p class="lots-of-block_additional-text"> We have high expectations of our hair and body care and our formulas won't disappoint. From a deep cleansing lather to our signature fresh scent, we've captured the sensorial shower experience you love. </p> <a href="" class="lots-of-block_link"></a> </div> <div class="lots-of-block_window"> <p class="lots-of-block_pretitle"></p> <h2 class="lots-of-block_title"></h2> <p class="lots-of-block_main-text"></p> <p class="lots-of-block_additional-text"></p> <a href="" class="lots-of-block_link"></a> </div> <div class="lots-of-block_window"></div> <div class="lots-of-block_window"> <img class="lots-of-block_img" src="images/imgcrem2.jpeg" alt="" /> </div> <div class="lots-of-block_window"> <p class="lots-of-block_pretitle"></p> <h2 class="lots-of-block_title"></h2> <p class="lots-of-block_main-text"></p> <p class="lots-of-block_additional-text"></p> <a href="" class="lots-of-block_link"></a> </div> </div> </div> </section>
.Lots-of-blocks { height: 1950px; } .lots-of-block_blocks { display: flex; max-width: 100%; } .lots-of-block_window { flex-shrink: 0; width: 600px; height: 650px; background-color: #fbf6f0; } |
.Lots-of-blocks { height: 1950px; } .lots-of-block_blocks { display: flex; max-width: 100%; } .lots-of-block_window { flex-shrink: 0; width: 600px; height: 650px; background-color: #fbf6f0; }
Дополнительно:
не понятно чего вы хотите добиться... flex-wrap: wrap; правильно работает, может у вас размеры контейнера меньше чем влезает. Т.е у вас если контейнер 1200px и блоки по 600px без margin, то блоки встанут по 2.
Так же хочу заметить, использование height повсеместно не очень
display: grid; grid-template-columns: repeat(2, auto); |
display: grid; grid-template-columns: repeat(2, auto);
Вот и получается две колонки.
Надеюсь правильно тебя поняла.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы разместить по два блока в строке, можно воспользоваться CSS свойством `display: inline-block;`. Ниже приведен пример кода на языке PHP, который демонстрирует размещение двух блоков в одной строке:
<div>Блок 1</div> <div>Блок 2</div>
В данном примере каждый блок будет отображаться в одной строке, так как они имеют свойство `display: inline-block;`. При необходимости можно также задать ширину каждого блока, чтобы они занимали определенное количество пространства на странице. Например:
<div style="width: 45%">Блок 1</div> <div style="width: 45%">Блок 2</div>
Таким образом, вы сможете разместить два блока на одной строке и контролировать их ширину с помощью CSS свойств. Не забудьте также учитывать отступы и другие стили, чтобы обеспечить правильное отображение контента на странице.