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 |
pandy |
Jul 12 2023, 12:22 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
Afraid I don't understand what you want. Can you take it again, slowly?
|
Mim |
Jul 12 2023, 01:32 PM
Post
#3
|
Group: Members Posts: 3 Joined: 12-July 23 Member No.: 28,986 |
Afraid I don't understand what you want. Can you take it again, slowly? I want to remove unnecessary distance between posts https://sun9-76.userapi.com/impg/WBSppUFQrh...&type=album |
Christian J |
Jul 12 2023, 03:39 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,665 Joined: 10-August 06 Member No.: 7 |
I'm not so familiar with Flex layouts, but it sounds like you want three columns (instead of the current rows with three images per row)?
BTW the code below is not valid HTML, is it some kind of server-side script? QUOTE CODE <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> |
Mim |
Jul 12 2023, 04:52 PM
Post
#5
|
Group: Members Posts: 3 Joined: 12-July 23 Member No.: 28,986 |
I'm not so familiar with Flex layouts, but it sounds like you want three columns (instead of the current rows with three images per row)? BTW the code below is not valid HTML, is it some kind of server-side script? QUOTE CODE <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> asp.net |
Lo-Fi Version | Time is now: 11th May 2024 - 10:27 AM |