У меня есть 5 изображений:
.ribbons{ display: flex; width: 300px; flex-direction: row-reverse; flex-wrap: wrap-reverse; } .ribbons > img{ width: 150px; }
<h1>RIBBONS</h1> <div class="ribbonrack"> <div class="ribbons"> <img src="https://via.placeholder.com/150x60?text=Ribbon 1"> <img src="https://via.placeholder.com/150x60?text=Ribbon 2"> <img src="https://via.placeholder.com/150x60?text=Ribbon 3"> <img src="https://via.placeholder.com/150x60?text=Ribbon 4"> <img src="https://via.placeholder.com/150x60?text=Ribbon 5"> </div> </div>
Я хочу, чтобы они согнулись так, чтобы они выстроились, как показано ниже, но то, что я пробовал выше, не может заставить его работать.
Есть идеи? Мне бы хотелось, чтобы это работало как с четными, так и с нечетными количествами ленты и без изменения порядка самих лент в DOM.
Если ваши предметы довольно стати c, вы можете рассмотреть возможность использования css-grid (https://css-tricks.com/snippets/css/complete-guide-grid/), тогда вам не нужно работать с полями. Однако, чтобы это работало, я изменил порядок img в шаблоне html. Существует также атрибут order, который может изменить порядок расположения элементов https://developer.mozilla.org/en-US/docs/Web/CSS/order.
css-grid
img
order
.ribbons { display: grid; grid-template-columns: repeat(4, auto); width: 300px; flex-direction: row-reverse; flex-wrap: wrap-reverse; } .ribbons>img { grid-column-end: span 2; } .ribbons>img:last-child { grid-column: 2; grid-column-end: span 2; }
<h1>RIBBONS</h1> <div class="ribbonrack"> <div class="ribbons"> <img src="https://via.placeholder.com/150x60?text=Ribbon 5"> <img src="https://via.placeholder.com/150x60?text=Ribbon 4"> <img src="https://via.placeholder.com/150x60?text=Ribbon 3"> <img src="https://via.placeholder.com/150x60?text=Ribbon 2"> <img src="https://via.placeholder.com/150x60?text=Ribbon 1"> </div> </div>
Добавьте justify-content: center; и измените flex-wrap на wrap в вашем классе .ribbons. Затем заполните <img> в обратном порядке в HTML.
justify-content: center;
flex-wrap
wrap
.ribbons
<img>
.ribbons{ display: flex; width: 300px; flex-wrap: wrap; justify-content: center; } .ribbons > img{ width: 150px; }
введите описание изображения здесь
Вот ваш ответ .....
.ribbons{ display: flex; width: 300px; flex-direction: row-reverse; flex-wrap: wrap; } .ribbons > img{ width: 150px; } .img5{ margin-right: 80px;; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="ribbon.css"> <title>Document</title> </head> <body> <h1>RIBBONS</h1> <div class="ribbonrack"> <div class="ribbons"> <img src="https://via.placeholder.com/150x60?text=Ribbon 1"> <img src="https://via.placeholder.com/150x60?text=Ribbon 2"> <img src="https://via.placeholder.com/150x60?text=Ribbon 3"> <img src="https://via.placeholder.com/150x60?text=Ribbon 4"> <img class="img5" src="https://via.placeholder.com/150x60?text=Ribbon 5"> </div> </div> </body> </html>