БЛОГ НА HUSL


Как лучше сверстать блок «Наши партнеры»

Автор вопроса: Андрей Глазачев

Подскажите, можно ли сверстать такой блок на гридах и как лучше оформить разметку? введите сюда описание изображения

Хочется обойтись структурой:

<section class='partners'>
    <div class='partners__list'><!-- тут список img !--></div>
    <div class='partners__info'><!-- блок «нам доверяют» !--></div>  
</section>

Если нельзя буду рад советам. Не хочется логотипы разбивать на 2 обертки по понятными причинам. Сам блок будет статичен, но хочется максимально чистенько.


Источник

Ответы (1 шт):

Автор решения: HTMLProgrammer

Можно попробовать на float реализовать. Вот пример

.partners__info {
    float: right;
    width: 300px;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 5px solid yellow;

    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.partners__list {
    display: inline;
}

img {
    padding: 10px;
    width: 100px;
    box-sizing: border-box;
}

img.active {
    border: 2px solid yellow;
}
<section class='partners'>
    <div class='partners__list'>
        <div class='partners__info'>
            <div>
                <h3>20 лет нам доверяют</h3>

                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
        </div>

        <div class='partners__list'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg' class='active'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>
            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>

            <img src='https://c7.hotpng.com/preview/282/400/912/hamburger-history-of-mcdonald-s-nyse-mcd-food-mcdonald-s-logo-png.jpg'>

        </div>
    </div>
</section>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.