1

Суть вопроса в следующем: добавил кнопки в дивы и из-за текста в 2 строки в последнем диве, уезжает див(вверх) а не кнопка вниз, как прижать кнопку к нижнему краю, чтобы дивы остались в ряд?

.container {
    padding-top: 13px;
    margin: 0 auto;
    width: 1920px;
    height: 6581px;
    background-color: #ffffff;
    background: url(images/bg_main.jpg)  no-repeat;
    background-size: contain;
}
.gallery {
    width: fit-content;
    margin: 0 auto;
    margin-top: 92px;
}

.gallery-block {
    background-color: #444444;
    display: inline-block;
    background-color: #f7f7f7;
    height: 481px;
    width: 270px;
    text-align: center;
    margin: 0 14px;
}

.gallery-h5 {
    text-align: center;
    max-width: 169px;
    margin: 0 auto;
    margin-top: 20px;
    color: #000000;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.14px;
}

.gallery-button {
    width: 130px;
    height: 30px;
    background-color: #f44336;
    color: #ffffff;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.14px;
    border: none;
}

.gallery-span {
    text-transform: uppercase;
}
.gallery img {
   width: 271px;
   height: 376px;
}
<div class="container">
  <div class="gallery">
            <div class="gallery-block"><img src="#" alt="piv">
            <h5 class="gallery-h5"><span class="gallery-span">Assasin’s Creed:</span> Rogue</h5><button 
  class="gallery-button">Buy</button></div>
            <div class="gallery-block"><img src="#" alt="GamePic"> 
                <h5 class="gallery-h5"><span class="gallery-span">Tomb Raider</span></h5><button 
  class="gallery-button">Buy</button></div>
            <div class="gallery-block"><img src="#" alt="GamePic"> 
                <h5 class="gallery-h5"><span class="gallery-span">Ryse:</span> Son Of Rome</h5><button 
  class="gallery-button">Buy</button></div>
            <div class="gallery-block"><img src="#" alt="GamePic"> 
                <h5 class="gallery-h5"><span class="gallery-span">World Of Warcraft:</span>
  Wrath&nbsp;Of The Linch King</h5><button class="gallery-button">Buy</button></div>
        </div>
</div>

1
  • 2
    Потому что для inline-block элементов значение vertical-align по умолчанию — baseline, вот по базовой линии и выравнивается
    – andreymal
    Commented 18 июн. 2020 в 12:11

1 ответ 1

1

Вот вариант с флексом у gallery-block. Только обратите внимание что и верстку поправил, чтоб разделить контент блока на верхнюю и нижнюю часть

.container {
    padding-top: 13px;
    margin: 0 auto;
    width: 1920px;
    height: 6581px;
    background-color: #ffffff;
    background: url(images/bg_main.jpg)  no-repeat;
    background-size: contain;
}
.gallery {
    width: fit-content;
    margin: 0 auto;
    margin-top: 92px;
    display: flex;
    align-items: flex-start;
}

.gallery-block {
    background-color: #444444;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: #f7f7f7;
    height: 481px;
    width: 270px;
    text-align: center;
    margin: 0 14px;
}

.gallery-h5 {
    text-align: center;
    max-width: 169px;
    margin: 0 auto;
    margin-top: 20px;
    color: #000000;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.14px;
}

.gallery-button {
    width: 130px;
    height: 30px;
    background-color: #f44336;
    color: #ffffff;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.14px;
    border: none;
}

.gallery-span {
    text-transform: uppercase;
}
.gallery img {
   width: 271px;
   height: 376px;
}
<div class="container">
  <div class="gallery">
            <div class="gallery-block">
              <div>
                <img src="#" alt="piv">
                  <h5 class="gallery-h5">
                    <span class="gallery-span">Assasin’s Creed:</span> Rogue
                  </h5>
              </div>
              <button class="gallery-button">Buy</button>
            </div>
            
            <div class="gallery-block">
              <div>
                <img src="#" alt="piv">
                  <h5 class="gallery-h5">
                    <span class="gallery-span">Tomb Raider</span>
                  </h5>
              </div>
              <button class="gallery-button">Buy</button>
            </div>
            
            <div class="gallery-block">
              <div>
                <img src="#" alt="piv">
                  <h5 class="gallery-h5">
                    <span class="gallery-span">Ryse:</span> Son Of Rome
                  </h5>
              </div>
              <button class="gallery-button">Buy</button>
            </div>
            
            <div class="gallery-block">
              <div>
                <img src="#" alt="piv">
                  <h5 class="gallery-h5">
                    <span class="gallery-span">World Of Warcraft:</span> Wrath&nbsp;Of The Linch King
                  </h5>
              </div>
              <button class="gallery-button">Buy</button>
            </div>
        </div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.