thembale Ответов: 1

Отображение новостей на индексной странице в ASP.NET ядро MVC в строке а не в столбце


Привет может ли кто нибудь помочь мне asp.net основной веб-сайт mvc, который имеет два приложения-бэкэнд и фронтэнд, бэкэнд предназначен для администраторов, чтобы обновлять/загружать контент, такой как новости и отчеты, и сохранять его в базе данных Sql, а фронтэнд-приложение читает из БД. Теперь моя задача заключается в индексном представлении, которое показывает новости, оно показывает список загруженных новостей в столбце.
Я хочу, чтобы они были в строке, которая имеет 3 столбца, как в одном столбце должны отображаться все детали записи.
ниже приведен контроллер и индексное представление, над которым я работаю

Что я уже пробовал:

мой индексный метод:
public IActionResult Index()
{
    return View(_context.News.Take(3).OrderByDescending(x => x.Id).ToList());
}

Индексированное представление
<div class="un-col-md-8 un-content">

    <div class="un-list-post">

        @foreach (var item in Model)
        {
            <div class="un-item-post un-item-medium">

              

                <div class="un-post-caption un-shadow">

                  
                    <div>
                        @{
                            var imgsrc = "";
                            if (item.Img != null)
                            {
                                var base64 = Convert.ToBase64String(item.Img);
                                imgsrc = string.Format("data:image/jpg;base64,{0}", base64);
                            }
                            
                        }
                    <div>
                      
                    </div>
                    </div>
                    <div class="un-post-title">@item.Title</div>
                    <div class="un-post-exc">@Html.Raw(item.Content) [...]</div>

                    <div class="un-btn-more un-btn-style-1">
                        <a>continue</a>
                    </div>

                    <div class="un-post-info">

                        <div class="un-post-meta un-pull-left">
                            <span class="un-post-date">@item.CreatedOn</span> 
                          
                        </div>

                        <div class="un-post-stats un-pull-right">
                           
                        </div>

                        <div class="un-clearfix"></div>

                    </div>

                </div>

            </div>

        }
     

 


    </div>

</div>

1 Ответов

Рейтинг:
7

Richard Deeming

Существуют различные способы создания многоколоночного контента в CSS.

Вероятно, самым простым было бы использовать Flexbox:
CSS Flexible Box Layout - CSS: Каскадные Таблицы Стилей | MDN[^]

.un-list-post {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.un-list-post > div {
    flex: 1 1 33%;
}