Выровнять элементы внизу div

Question

Я хочу, чтобы каждая кнопка «Читать больше» каждого div была выровнена на том же уровне (и в этом случае в нижней части div). Проблема в том, что я не хочу указывать определенную высоту для div и не изменять разметку или стиль.

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

Here's the working fiddle

.btn{ 
display: inline-block; 
font-family: 'Oswald', sans-serif; 
font-weight: 400px; 
padding: 5px 10px; 
border: 2px solid #1AC4F8; 
color: #1AC4F8; 
cursor: pointer;} 

Answer 1

Одно из решений влечет за собой с помощью Flexbox и абсолютное позиционирование:

https://jsfiddle.net/aLbu6frL/6/

.row { 
    display: flex; 
    flex-direction: row; 
    padding-bottom:40px; 
} 
.column { 
    flex: 0 0 auto; 
    position: relative; 
} 
.btn-bottom { 
    position: absolute; 
    bottom: -40px; 
    left: 0px; 
    right: 0px; 
    text-align:center; 
} 

Answer 2

Предполагая, что я вас правильно понял, я сделал следующие изменения:

.btn{ 
     display: inline-block; 
     font-family: 'Oswald', sans-serif; 
     font-weight: 400px; 
     padding: 5px 10px; 
     border: 2px solid #1AC4F8; 
     color: #1AC4F8; 
     cursor: pointer; 
     -webkit-transition: color 0.8s, background-color 0.8s; 
     transition: color 0.8s, background-color 0.8s; 
     position: absolute; 
     bottom: 0px; 
    } 
    .wrapper { 
     position: relative; 
    } 

• добавил position: absolute; к вашему btn класса
• добавил bottom: 0px для комплимента позиция (опять же до класса btn)
• добавлен position: relative; в wrapper класс, так btn знает, что он позиционирует себя внутри.

Возможно, вам потребуется обновить существующий CSS, чтобы приспособиться к изменениям.

Обновлено Вилка:

https://jsfiddle.net/exaboofu/

Answer 3

Flexbox может сделать это.

Он установит все столбцы на равную высоту и сообщит, что кнопка находится внизу каждой колонки.

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box; 
 
} 
 
.row { 
 
    display: flex; 
 
} 
 
#services { 
 
    background-color: rgb(265, 265, 265); 
 
    color: #424242; 
 
} 
 
#services .col-3 { 
 
    text-align: left; 
 
    float: none; 
 
    display: flex; 
 
    flex: 0 0 25%; 
 
    padding: 10px; 
 
    flex-direction: column; 
 
} 
 
#sevices h3 { 
 
    margin: 10px 0 
 
} 
 
.btn { 
 
    margin-top: auto; 
 
    display: inline-block; 
 
    font-family: 'Oswald', sans-serif; 
 
    font-weight: 400px; 
 
    padding: 5px 10px; 
 
    border: 2px solid #1AC4F8; 
 
    color: #1AC4F8; 
 
    cursor: pointer; 
 
    -webkit-transition: color 0.8s, background-color 0.8s; 
 
    transition: color 0.8s, background-color 0.8s 
 
}

<section id="services"> 
 
    <!-- Services Starts Here --> 
 
    <div class="wrapper"> 
 
    <h2>SERVICES</h2> 
 
    <div class="divider"></div> 
 
    <div class="row"> 
 
     <div class="col-3"> 
 
     <h3>Consulting and audit</h3> 
 
     <p>Get help to accelerate your company online from our highly experienced specialists. It is as good as it sounds!</p> 
 
     <a href="#" class="btn">Read more</a> 
 
     </div> 
 
     <div class="col-3"> 
 
     <h3>Web Development</h3> 
 
     <p>Professional custom e-commerce and web design to let your business grow at a rapid pace. See how we do that.</p> 
 
     <a href="#" class="btn">Read more</a> 
 
     </div> 
 
     <div class="col-3 right-align"> 
 
     <h3>Search Engine Optimization</h3> 
 
     <p>Want to be on Page 1 of Google and Bing? Read about our SEO services that drive more potential customers.</p> 
 
     <a href="#" class="btn">Read more</a> 
 
     </div> 
 
     <div class="col-3 right-align"> 
 
     <h3>Pay Per Click Management</h3> 
 
     <p>Attract highly relevant audience with Google Adwords, Display, Retargeting, Facebook, YouTube, Twitter.</p> 
 
     <a href="#" class="btn">Read more</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 4

Пожалуйста, добавьте еще немного CSS в существующую и ваша кнопка выравнивания с нижней пожалуйста, посмотрите ниже кода CSS:

#services .right-align h3, #services .right-align p{ 
     text-align: right; 
    } 
    #services .right-align .btn{ 
     text-align:left; 
    } 

    .btn{ 
     bottom: 0; 
     position:absolute; 
    } 

Answer 5

Вы можете установить p tag min-height. Я просто попробую, и это работает для меня, посмотрите пример кода ниже. Вы можете установить высоту тега p в соответствии с вашими потребностями.

#services .row .col-3 p { 
    width: 100%; 
    height: 300px; 
}