@olya_097

Как поправить чтобы было как на скрине?

  • Вопрос задан
  • 121 просмотр
Решения вопроса 2
@noeer
Нужно обернуть каждую карточку в дополнительный блок с фиксированной высотой.
<div class="news__item-wrap">
	<div class="news__item">
		<div class="products__image">
			<img src="https://i.ibb.co/Jm1BgzF/picture-image.jpg" alt="">
		</div>
		<div class="news__text">  
			<div class="news__title">
				Выработка масла в год ...
			</div>
			<p class="news__description">
				В Минск прибыли самые покупатели газа из Украины: «Автотранс», «НАДЕЖДА», «Укренерджи», ОККО, SOCAR, «БРСМ-Натфа», KLO и др. поставщиков представлляли. В Минск прибыли самые покупатели газа из Украины: «Автотранс», «НАДЕЖДА», «Укренерджи», ОККО, SOCAR, «БРСМ-Натфа», KLO и др. поставщиков представлляли. В Минск прибыли самые покупатели газа из Украины: «Автотранс», «НАДЕЖДА», «Укренерджи», ОККО, SOCAR, «БРСМ-Натфа», KLO и др. поставщиков представлляли. 
			</p>
		</div>
	</div>
</div>


.news__item-wrap {
  	height: 352px;
    width: -webkit-calc(100% / 3 - 16px);
    width: calc(100% / 3 - 16px);
    margin-right: 8px;
    margin-left: 8px;
    padding-bottom: 15px;
    margin-bottom: 35px;
  }
    @media screen and (max-width: 960px) {
      .news__item-wrap {
        width: -webkit-calc(100% / 2 - 16px);
        width: calc(100% / 2 - 16px); } }
    @media screen and (max-width: 767px) {
      .news__item-wrap {
        width: -webkit-calc(100% / 1 - 16px);
        width: calc(100% / 1 - 16px); } }

  .news__item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background: #fff;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25); }
   	.news__item:hover {
   		z-index: 2;
   	}
Ответ написан
serii81
@serii81
Я люблю phр...
noeer совершенно прав.
Нужно обернуть каждый блок и задать position: relative, а самому блоку position: absolute.

Вот как я сделал

https://jsfiddle.net/serii/15oc6ytx/2/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы