Перемещение элемента вниз

221
09 февраля 2018, 19:01

Как перенести элемент вниз? Есть два слова "Смотреть работу" и они находятся не на одном уровне и я хочу переместить их на один уровень. Как это сделать?

Answer 1

Как один из вариантов можно так:

.block { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    width: 100%; 
} 
.bottom { 
    width: 100%; 
    -webkit-box-align: end; 
        -ms-flex-align: end; 
            align-items: flex-end; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
} 
.div{ 
    width:300px;  
    padding: 10px; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -ms-flex-wrap: wrap; 
        flex-wrap: wrap; 
    -webkit-box-align: stretch; 
        -ms-flex-align: stretch; 
            align-items: stretch; 
    -ms-flex-line-pack: stretch; 
        align-content: stretch; 
    -ms-flex-item-align: stretch; 
        align-self: stretch; 
} 
 
/**************TWO*****************/ 
 html, body{ 
    height: 100%; 
 } 
 
.two p { 
    height: 100%; 
} 
.block_two { 
    display: inline-block; 
    height: 100%; 
} 
.two { 
    width: 212px; 
    padding: 15px; 
    height: 100%; 
    max-height: 200px; 
    display: inline-block; 
}
<div class="block"> 
<div class="div"> 
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.  </p> 
<a href="#!" class="bottom">Смотреть работы</a> 
</div>  
<div class="div"> 
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> 
<a href="#!" class="bottom">Смотреть работы</a> 
</div>  
</div> 
 
 
<h3>Вариант 2:</h3> 
<div class="block_two"> 
<div class="two"> 
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
<a href="#!">Смотреть</a> 
</div> 
 
<div class="two"> 
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> 
<a href="#!">Смотреть</a> 
</div> 
</div>

READ ALSO
Скачки стилей библиотеки chosen

Скачки стилей библиотеки chosen

Пытаюсь сделать выбор полей с помощью библиотеки chosenНо проблема в том, что когда выбираешь большие элементы, эта планка расширяется вверх,...

257
Проблема с CSS стилями [требует правки]

Проблема с CSS стилями [требует правки]

Как исправить вот это?

223
Скрыть блок div через css

Скрыть блок div через css

Здравствуйте, есть несколько дивов, формируются через php, в итоге получается такой код:

311