Grani

Логика изменения блоков на видео мне не вполне понятна. Можно ли это запрограммировать на css, не задавая отдельные стили для каждой ширины окна и для каждого количества блоков? bandicam 2023-08-20 21-35-45-303.mp4

на скриншоте десктопная и мобильная версия вёрстки. Как сделать, чтобы у одного элемента на мобильной версии слева была иконка а справа текст, а у другой слева текст, а справа иконка? Ещё чтобы всё симметрично было, везде размер элементов и отступы одинаковые. в общей обёртке если один блочный элемент сверху, у другой снизу, а я сменил обёртке стиль на "display: flex;", а обоим элементам "width: 50%;", то верхний станет слева, а нижний - справа. А как наоборот сделать, чтобы верхний справа, а нижний слева? я придумал только использовать position: absolute. получилось криво. Как сделать, чтобы блок-обёртка подстраивался по высоте под картинку? https://codepen.io/zfO/pen/oNQJorE <div class="cir_obj_container"> <div class="cir_obj"> <div class="img"><img src="https://sun9-9.userapi.com/c4409/u154917110/d_6bb0dab9.jpg"></div> <div class="bottom_text"> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? </div> </div> <div class="cir_obj reverse"> <div class="img"><img src="https://sun9-9.userapi.com/c4409/u154917110/d_6bb0dab9.jpg"></div> <div class="bottom_text"> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? </div> </div> <div class="cir_obj"> <div class="img"><img src="https://sun9-9.userapi.com/c4409/u154917110/d_6bb0dab9.jpg"></div> <div class="bottom_text"> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? </div> </div> </div> <style> .cir_obj_container{ display: flex; width: 100%; } .cir_obj{ width: 33%; display: inline-block; margin: 20px; } .cir_obj img{ margin: 20px; height: 230px; width: auto; } .cir_obj img{ width: 100%; height: auto; } @media (max-width: 1280px) { .cir_obj{ width: 100%; display: flex; margin: 0px; } .cir_obj_container{ display: block; } .cir_obj .bottom_text, .cir_obj .img{ width: 50%; margin: 30px; } .cir_obj.reverse .bottom_text{ width: calc(50% - 60px); } .cir_obj.reverse .img, .cir_obj.reverse .img img{ right: 0px; position: absolute; } } <style>

http://mhrj.orv.org.ru/FILES/bootstrap/tender-test.html 4 серых блока-колонки Проматываю страницу вниз и видно, что блок короче высоты страницы. какие стили на это влияют и как исправить? Второй вопрос: как убрать вторую бесполезную полосу прокрутки у тега body? у него стоит стиль height: 100%; почему тогда вертикальная полоса прокрутки?

<ol class="app"> <li><span>доставка от 2 дней</span></li> <li><span>скорость производства 600 м2/сутки</span></li> <li><span>гарантия от 5 лет</span></li> </ol> ol{ background: #7A7A7A; } ol.app li{ width: 100%; float: left; } https://jsfiddle.net/m1Lkwzuv/1/ Почему со стилем "float", свойство "background" не работает? если закомментировать "float", то заработает.