Блог

У меня есть 2 поля div на моей HTML-странице. В каждом поле есть 5 изображений изображений, которые я перечислил сбоку. У меня есть 5 изображений рядом друг с другом в div чуть ниже. Но я не мог заставить его выстроиться в линию. Мои знания интерфейса не очень хороши, как я могу это сделать?

Изображение страницы:

Как вы можете видеть, они не стоят в очереди, изображения находятся вверху и внизу. Как мне заставить его оставаться в строю?

Html-код:

 @{
    Layout = null;
}
<link href="~/Content/bscarousel.css" rel="stylesheet" />
<script src="~/Scripts/Home/Slider.js"></script>
<style>
    .items {
        display: flex;
        justify-content: space-evenly; /* this gives even space between items as shown in your image in the question */
        background-color: #4C8C9E;
    }

</style>

<div ng-controller="SliderController">
    <div class="items">
        
        <a href="#">
            <img class="img-responsive" src="~/images/ShamanKing.jpg" style="height:130px;"/><p style="color:white; text-align:center">Shaman King</p>
        </a>

        <a href="#">
            <br />
            <img class="img-responsive" src="~/images/Limit.jpg" style="height:130px;"/><p style="color:white; text-align:center">Limit</p>
        </a>

        <a href="#">
            <br />
            <img class="img-responsive" src="~/images/DeathNote.jpg" style="height:130px;"/><p style="color:white; text-align:center">Death Note</p>
        </a>

        <a href="#">
            <br />
            <img class="img-responsive" src="~/images/SeraphoftheEnd.jpg" style="height:130px;"/><p style="color:white; text-align:center">Seraph of the End</p>
        </a>

        <a href="#">
            <br />
            <img class="img-responsive" src="~/images/OnePunchMan.jpg" style="height:130px;"/><p style="color:white; text-align:center">One-Punch Man</p>
        </a>
    </div>
    <div style="display:flex; justify-content:space-evenly; background-color:#4C8C9E">
        <a href="#">
            <img class="img-responsive" src="~/images/AllYouNeedIsKill.jpg" style="height:130px;"/><p style="color:white; text-align:center">All You Need Is Kill</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="~/images/FullMetal.jpg" style="height:130px;"/><p style="color:white; text-align:center">Fullmetal Alchemist</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="~/images/VampireKnight.jpg" style="height:130px;"/><p style="color:white; text-align:center">Vampire Knight</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="~/images/RosarioVampire.jpg" style="height:130px;"/><p style="color:white; text-align:center">Rosario Vampire</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="~/images/Gantz.jpg" style="height:130px;"/><p style="color:white; text-align:center">Gantz</p>
        </a>
    </div>

</div>
 

Я также создал версию, ориентированную на адаптивность. Только я помещаю все <a> теги в один <div class="items"> .

[CSS]

     <style>
        .items {
            padding: 20px;
            display: grid;
            grid-gap: 20px;
            grid-template-columns: repeat(5, 2fr);
            background-color: #4C8C9E;
        }
    
        .items a {
            height: 180px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    
        @media(max-width: 800px) {
            .items {
                grid-template-columns: repeat(2, 5fr);
            }
        }
    
        @media(max-width: 368px) {
            .items {
                grid-template-columns: repeat(1, 10fr);
            }
        }
    
    </style>
 

[HTML]

 <div ng-controller="SliderController">
    <div class="items">
        
        <a href="#">
            <img class="img-responsive" src="/images/ShamanKing.jpg" style="height:130px;"/><p style="color:white; text-align:center">Shaman King</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="/images/Limit.jpg" style="height:130px;"/><p style="color:white; text-align:center">Limit</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="/images/DeathNote.jpg" style="height:130px;"/><p style="color:white; text-align:center">Death Note</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="/images/SeraphoftheEnd.jpg" style="height:130px;"/><p style="color:white; text-align:center">Seraph of the End</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="/images/OnePunchMan.png" style="height:130px;"/><p style="color:white; text-align:center">One-Punch Man</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="/images/AllYouNeedIsKill.jpg" style="height:130px;"/><p style="color:white; text-align:center">All You Need Is Kill</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="/images/FullMetal.jpg" style="height:130px;"/><p style="color:white; text-align:center">Fullmetal Alchemist</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="/images/VampireKnight.jpg" style="height:130px;"/><p style="color:white; text-align:center">Vampire Knight</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="/images/RosarioVampire.jpg" style="height:130px;"/><p style="color:white; text-align:center">Rosario Vampire</p>
        </a>

        <a href="#">
            <img class="img-responsive" src="/images/Gantz.jpg" style="height:130px;"/><p style="color:white; text-align:center">Gantz</p>
        </a>
    </div>

</div>
 

Полноэкранный режим:

https://i.stack.imgur.com/7JwLb.jpg

Ширина менее 800 пикселей:

https://i.stack.imgur.com/v9fpX.jpg

Ширина меньше 368 пикселей:

https://i.stack.imgur.com/690nO.jpg

добавьте фиксированную ширину к каждому элементу .items a{width:130px;} , чтобы указать размер столбца и выглядеть идеально