Как сделать, чтобы все соседние блоки были одной высоты?

Question

[Евгений]

В общем в будущем эта панель с текущими новостями будет циклом выводиться с БД.

Но в данный момент на стадии вёрстки заметил такую штуку, что блоки могут быть разной высоты в зависимости от кол-ва текста.

Я в вёрстке не силён, но не подскажете как можно исправить этот баг чтобы они подстаивалиьис под высоту самого высокого блока? https://jsfiddle.net/mLttdLmw/1/

Answer 1

[OGladkiy]

Для родителя задай display: flex; align-item:stretch. для потомков height: 100%;
https://jsfiddle.net/mLttdLmw/6/

Comments

[Евгений]

Пойду копать css где там стили для родителя и потомка)

[Евгений]

Вроде сделал всё, как вы и сказали, но что-то не помогает

.service-section .items-container {
  margin-top: 30px;
  display: flex;
  align-items: stretch;
  flex-direction: row;
}

.service-section .items-container .slick-prev:before, .service-section .items-container .slick-next:before {
  font-size: 25px;
  color: #48bdc5;
}

.service-section .items-container .item {
  margin: 10px 20px;
  outline: 0;
}

.service-section .inner-box {
  position: relative;
  border-radius: 5px 5px 0px 0px;
  box-shadow: 0 0 20px #f1f1f1;
  margin-bottom: 20px;
  height: 100%;
}

.service-section .inner-box .img_holder img {
  width: 100%;
  border-radius: 5px;
}

.service-section .inner-box .image-content {
  padding: 38px 30px;
  background: #fff;
  height: 100%;
}

[OGladkiy]

Евгений, вот же ТЫК

[Евгений]

Oleg Gladkiy, Я даже скопировал ваш код только что

тотсамый код

.service-section .items-container {
  margin-top: 30px;
  display: flex;
  align-items: stretch;
  flex-direction: row;
}

.service-section .items-container .slick-prev:before, .service-section .items-container .slick-next:before {
  font-size: 25px;
  color: #48bdc5;
}

.service-section .items-container .item {
  margin: 10px 20px;
  outline: 0;
}

.service-section .inner-box {
  position: relative;
  border-radius: 5px 5px 0px 0px;
  box-shadow: 0 0 20px #f1f1f1;
  margin-bottom: 20px;
  height: 100%;
}

.service-section .inner-box .img_holder img {
  width: 100%;
  border-radius: 5px;
}

.service-section .inner-box .image-content {
  padding: 38px 30px;
  background: #fff;
  height: 100%;
}
.service-section .inner-box .image-content
.service-section .inner-box .image-content span {
  font-size: 15px;
  line-height: 26px;
  font-weight: 400;
  color: #777777;
  letter-spacing: .5px;
}

.service-section .inner-box .image-content h6 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  color: #222222;
  padding-top: 6px;
  padding-bottom: 8px;
  text-transform: uppercase;
}

.service-section .inner-box .image-content p {
  font-size: 15px;
  line-height: 26px;
  font-weight: 400;
  color: #777777;
  padding-bottom: 15px;
}

.service-two .left-side {
  padding: 140px 0px;
}

.service-two .left-side .section-title h3 {
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 22px;
}

.service-two .left-side .section-title h3inner-box:before {
  position: absolute;
  content: '';
  background: #ececec;
  bottom: 0px;
  left: 0px;
  height: 1px;
  width: 240px;
}

.service-two .left-side .section-title h3:after {
  position: absolute;
  content: '';
  background: #48bdc5;
  bottom: 0px;
  left: 0px;
  height: 1px;
  width: 50px;
}

.service-two .left-side .section-title p {
  font-size: 15px;
  line-height: 26px;
  color: #777777;
  font-weight: 400;
  padding-bottom: 40px;
}

.service-two .social-links {
  margin-bottom: 50px;
}

.service-two .social-links li {
  position: relative;
  display: inline-block;
  width: 170px;
  margin-right: 40px;
}

.service-two .social-links li .icon-box {
  width: 95px;
  height: 95px;
  line-height: 95px;
  border-radius: 50%;
  text-align: center;
  margin-bottom: 20px;
  border: 1px solid #dfdfdf;
}

.service-two .social-links li .icon-box i:before {
  font-size: 35px;
  color: #222222;
}

.service-two .social-links li .border-shep {
  position: absolute;
  content: '';
  top: 50px;
  right: 0px;
  background: #cdcdcd;
  height: 1px;
  width: 20px;
}

.service-two .social-links li h6 {
  font-size: 16px;
  line-height: 28px;
  color: #222222;
  font-weight: 400;
  padding-bottom: 5px;
  letter-spacing: .5px;
}

.service-two .link-buttons li {
  display: inline-block;
  color: #777777;
  font-size: 18px;
  font-weight: 400;
}

.service-two .link-buttons li.link-btn a {
  font-size: 14px;
  line-height: 26px;
  font-weight: 600;
  text-transform: uppercase;
  color: #ffffff;
  height: 45px;
  padding: 0px 35px;
  line-height: 45px;
}

.service-two .link-buttons li.link-btn.style-one {
  background: #48bdc5;
  transition: all 500ms ease;
}

.service-two .link-buttons li.link-btn.style-one:hover {
  background: #7b64cb;
  transition: all 500ms ease;
}

.service-two .link-buttons li.or-background {
  margin: 0px 20px;
}

.service-two .link-buttons li.link-btn.style-two {
  background: #7b64cb;
  transition: all 500ms ease;
}

.service-two .link-buttons li.link-btn.style-two:hover {
  background: #48bdc5;
  transition: all 500ms ease;
}

.service-two .image-box img {
  width: 100%;
  margin-top: 28px;
}

.service-details {
  padding: 120px 0px;
}

И всё равно блоки пляшут

[OGladkiy]

Евгений, Значит я что то не так понимаю, мне кажется что ровно)

[Евгений]

Oleg Gladkiy,

[OGladkiy]

Евгений, Если в jsfiddle отображается нормально, а у вас на сайте нет, значит код на jsfiddle и на вашем сайте не совпадает.

[Евгений]

Oleg Gladkiy, dropmefiles.com/lG0Gq
Я же не вру Вам.

[OGladkiy]

Евгений, Добавь этот стиль

.slick-track {
	display: flex;
	align-items: stretch;
	height: 100%;
}

[Евгений]

Oleg Gladkiy, Благодарю, работает)

Answer 2

[Andrew]

Фиксированный height или min-height такой как у самого большого элемента.

Answer 3

[Александр Симонов]

Если нет возможности использовть flex, как написал оратор выше, то можно воспользоваться таблицами, делаете
display: table для родителя, а все дочерние блоки будут колонками с display: table-cell