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
    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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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