Отображение двух div в одном ряду, используя отдельный foreach - PullRequest
Новая
       18

Отображение двух div в одном ряду, используя отдельный foreach

0 голосов
/ 14 сентября 2018

Я хотел бы разделить мои данные, заполненные в представлении, на разные столбцы с помощью начальной загрузки.Что происходит сейчас, все результаты второго foreach отображаются под всеми результатами первого foreach.Я хотел бы ...

В первом foreach отобразить все результаты в столбце 1.

А во втором foreach отобразить все результаты в столбце 2 .. 

<div class="container">
    <div class="row">
        @foreach (var winner in Model.AwardWinners.Where(x => x.Type == 1))
        {
            <div class="col-xs-12 col-sm-6 col-md-6 d-block">
                <div class="colourbar"></div>
                <div class="awardWinnersBox">
                    <div class="top-info">

                        <div class="soloAuthorPhoto">
                            <img src="" alt="" onerror="this.src = '/images/noProfilePhoto.png'" />
                        </div>

                        <div class="authordetails">
                            <div class="soloAuthorHeading"></div>
                            <div class="soloAuthorName"></div>
                        </div>


                        <div class="verticalDivide"></div>
                        <div class="award">
                            <img src="/images/AwardWinners/thought-leader-logo.png" alt="" class="typeImage" />
                            <div class="awardName">
                                @winner.AwardName
                            </div>
                        </div>
                    </div>

                    <div class="title"><a href="">test</a></div>
                    <div class="eventTimeDetails">@(winner.Contact ?? "")</div>
                    <span class="bottomLine"></span>
                    <div class="firmMask">
                        <img src="" onerror="this.src='/images/lex-linkedin.png'" />
                    </div>
                </div>
            </div>
        }

        @foreach (var winner in Model.AwardWinners.Where(x => x.Type == 2))
        {
            <div class="col-xs-12 col-sm-6 col-md-6">
                <div class="colourbar"></div>
                <div class="awardWinnersBox">
                    <div class="top-info">

                        <div class="soloAuthorPhoto">
                            <img src="" alt="" onerror="this.src = '/images/noProfilePhoto.png'" />
                        </div>

                        <div class="authordetails">
                            <div class="soloAuthorHeading"></div>
                            <div class="soloAuthorName"></div>
                        </div>


                        <div class="verticalDivide"></div>
                        <div class="award">
                            <img src="/images/AwardWinners/Legal-influencer-logo.png" alt="" />
                            <div class="awardName">
                                @winner.AwardName 
                            </div>
                        </div>
                    </div>

                    <div class="title"><a href="">test</a></div>
                    <div class="eventTimeDetails">@(winner.Contact ?? "")</div>
                    <span class="bottomLine"></span>
                    <div class="firmMask">

                    </div>
                </div>
            </div>
        }
    </div>
</div>

1 Ответ

0 голосов
/ 14 сентября 2018

Сначала я добавлю столбцы, затем содержимое: 

<div class="container">
  <!--Column 1-->
  <div class="col-6">
    <!-- For each 1 -->
  </div>

  <!--Column 2-->
  <div class="col-6">
    <!-- For each 2 -->
  </div>
</div>

Имейте в виду, что вам придется применить макет к двум столбцам, а блоки содержимого должны занимать 100% столбцов.

...