Учусь вёрстке и столкнулся с такое проблемой, картинка уползает вниз, когда должна находиться справа от текста. До этого делал точно также, но зеркально и всё работало. Подскажите как исправить. HTML: <section class="d4"> <!--Четвёртый экран--> <h4> <p class="DOMA"> Download our<br> mobile apps </p> <figure class="line3"> <img src="../../icons/line2.png" alt=""> </figure> <p> Our dedicated patient engagement app and <br> web portal allow you to access information <br> instantaneously (no tedeous form, long calls, <br> or administrative hassle) and securely </p> <figure class="Download"> <img src="../../icons/Download.png" alt="Download"> </figure> <figure class="d4ill"> <img src="../../icons/illustration4.png" alt=""> </figure> </h4> </section> HTML <section class="d4"> <!--Четвёртый экран--> <h4> <p class="DOMA"> Download our<br> mobile apps </p> <figure class="line3"> <img src="../../icons/line2.png" alt=""> </figure> <p> Our dedicated patient engagement app and <br> web portal allow you to access information <br> instantaneously (no tedeous form, long calls, <br> or administrative hassle) and securely </p> <figure class="Download"> <img src="../../icons/Download.png" alt="Download"> </figure> <figure class="d4ill"> <img src="../../icons/illustration4.png" alt=""> </figure> </h4> </section> CSS: .d4{ display: flex; flex-direction: row; justify-content:space-around; } .DOMA{ display: block; margin-top: 36x; margin-left: auto; margin-right: auto; color: #000000; font-size: 36px; line-height: 152%; Text-align: left; } .line3{ margin-top: 26px; margin-bottom: 33px; } h4{ margin-left: 280px; margin-right: auto; margin-bottom: 37px; color: #8F8A9A; font-size: 25px; font-weight: lighter; } .d4ill{ margin-right: 164px; margin-left: 771px; display: inline-block; } .Download{ margin-right: 192px; margin-top: 40px; } Код .d4{ display: flex; flex-direction: row; justify-content:space-around; } .DOMA{ display: block; margin-top: 36x; margin-left: auto; margin-right: auto; color: #000000; font-size: 36px; line-height: 152%; Text-align: left; } .line3{ margin-top: 26px; margin-bottom: 33px; } h4{ margin-left: 280px; margin-right: auto; margin-bottom: 37px; color: #8F8A9A; font-size: 25px; font-weight: lighter; } .d4ill{ margin-right: 164px; margin-left: 771px; display: inline-block; } .Download{ margin-right: 192px; margin-top: 40px; } Вот как должно быть: И вот как у меня:
Если коротко, то добавь это в стиль к h4 и поподгоняй там height display: flex; flex-direction: column; flex-wrap: wrap; justify-content:space-around; height: 800px; CSS display: flex; flex-direction: column; flex-wrap: wrap; justify-content:space-around; height: 800px; Если долго Все свойства флекса взял на себя h4, и что бы элементы в нем тоже были во flex нужно указать ему свойство отображения как флекс. Соответсвенно и остальные свойства свойства флекса подбирать ему свои. Так же эти вездесущие марджины выглядят ужастно и не нужно, мне кажеться ты не до конца понимаешь их смысл. Красиво подгонять картинку должен сам флекс, марджины нужны только что бы элементы друг на друга не наслаивались при различных размерах экрана h4 который стоит поверх всего, да еще и со стилями выглядит невероятно плохо. Композиционно так верстать html в реальном проекте точно не стоит, и тебе больше проблемм, да и потом запутаешься что к чему было. Если у тебя возник вопрос, что при изменение размера экрана
Отредактировать сообщение мне не дают, поэтому допишу здесь Если у тебя возник вопрос, что при изменение размера экрана отображается не корректно, то: Все что смог сделать с флексом я сделал. Куда лучше было бы исправить верстку. Так объединив все элементы слева в блок, ты смогбы тем же флексом настроить их отображение отдельно flex-direction: column;. А потом при помощи flex-direction: row; в .d4 настроить взаимоположение созданного блока и картинки. И тогда получится гибкая верстка подстраивающаяся под разные размеры экранов
asdfowner, спасибо большое за критику и комментарии. Исправил ошибку. Только вот расстояние между колонками пришлось опять делать при помощи моего вездесущего margin, так как "column-gap" не срабатывал. Если сможешь, подскажи из-за чего расстояние между колонками не работало. .d4{ display: flex; flex-direction: row; justify-content:space-between; } .DOMA-BOX{ margin-left: 280px; flex-direction: column; column-gap: 71px; margin-right: 71px; } h4{ display: flex; flex-direction: column; flex-wrap: wrap; height: 800px; margin-right: auto; margin-bottom: 37px; color: #8F8A9A; font-size: 25px; font-weight: lighter; } .d4ill{ display: inline-block; flex-direction: column; } Код .d4{ display: flex; flex-direction: row; justify-content:space-between; } .DOMA-BOX{ margin-left: 280px; flex-direction: column; column-gap: 71px; margin-right: 71px; } h4{ display: flex; flex-direction: column; flex-wrap: wrap; height: 800px; margin-right: auto; margin-bottom: 37px; color: #8F8A9A; font-size: 25px; font-weight: lighter; } .d4ill{ display: inline-block; flex-direction: column; } <h4> <div class="DOMA-BOX"> <!--объединил контент слева --> <p class="DOMA"> Download our<br> mobile apps </p> HTML <h4> <div class="DOMA-BOX"> <!--объединил контент слева --> <p class="DOMA"> Download our<br> mobile apps </p>