how to fix indents between posts |
how to fix indents between posts |
Mim |
Jul 12 2023, 12:01 PM
Post
#1
|
Group: Members Posts: 3 Joined: 12-July 23 Member No.: 28,986 |
Example in the photo
There are 3 posts in a row, I don't know how to make the indent be, for example, 20% for everyone, but from the end of the height of the top (like if you look at the photo, then it's not that blue, but that the distance is that red) (it's either in .container or .post, I couldn't figure it out) P.S - if you do heigth: auto in .post, we will get (example in photo 2, but we need the objects to rise according to the scheme from photo 1) *I want to remove the extra distance between posts [css] .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .post { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 5px; overflow: hidden; margin-bottom: 40px; width: calc(33.33% - 20px); /* 3 posts per row */ background-color: #fff; transition: background-color 0.3s, transform 0.3s ease; display: flex; flex-direction: column; height: auto; } .post:hover { transform: translateY(-5px); background-color: #f8f8f8; } .post:active { transform: translateY(0); background-color: #fff; } .anime-image { width: 100%; height: auto; flex-shrink: 0; /* Prevent image from shrinking */ } .anime-details { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; } .title { font-weight: bold; font-size: 18px; margin-bottom: 10px; } .rating { font-weight: bold; font-size: 14px; } [/css] how i use <div class="container"> @foreach (var anime in Model.Animes) { <div class="post"> <a href="url"> <div class="anime-image-container"> <img class="anime-image" src="@anime.Image"> </div> </a> <div class="anime-details"> <p class="title">@anime.Title</p> <p class="rating">Рейтинг</p> </div> </div> } </div> This post has been edited by Mim: Jul 12 2023, 12:02 PM |
Lo-Fi Version | Time is now: 18th May 2024 - 01:47 AM |