Меня беспокоит повторяющаяся проблема, когда я пытаюсь сделать сайты в стиле сетки, как мне сделать все div в строке одинаковой высоты в зависимости от самого высокого div в этом ряду. Один из элементов div будет содержать набор элементов div, которые необходимо растянуть на основе этой высоты и автоматически заполнить, чтобы все перемещалось вместе.

Установка Div на одинаковую высоту должна основываться на том, какое содержимое находится внутри самого div. Например, когда текстовое поле изменяет размеры, картинка также должна иметь одинаковую высоту, а затем все «значки» должны растягиваться и сохранять одинаковую высоту.

Вот что у меня сейчас есть:

<div class="container">

  <div class="half">
    <h1>Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at ipsum tortor. Etiam ut lacus auctor, venenatis mauris vitae, scelerisque dolor. Mauris pulvinar purus libero, eget congue sem lobortis vitae.</p>
  </div>

  <div class="quater">
    <img src="http://i68.tinypic.com/6yo87o.jpg"></img>
  </div>

  <div class="quater social">
    <div class="third">Icon</div>
    <div class="third">Icon</div>
    <div class="third">Icon</div>
    <div class="third">Icon</div>
    <div class="third">Icon</div>
    <div class="third">Icon</div>
  </div>

</div>

CSS:

.half {
  width: 50%;
  background: yellow;
  float: left;
}

.quater {
  width: 25%;
  background: red;
  float: left;
}

.third {
  width: 33.33333333%;
  background: blue;
  float: left;
  color: white;
}

img {width: 100%;}

https://jsfiddle.net/atp1agmk/4/

И вот мой желаемый результат:

enter image description here

Я не против, если это должно быть сделано с помощью JavaScript либо

1
bLAZYY 13 Дек 2016 в 14:23

4 ответа

Лучший ответ
.container{
 display: flex;
}
.half {
  width: 50%;
  background: yellow;
  float: left;
}

.quater {
  width: 25%;
  background: red;
  float: left;
display: flex;
    align-items: center;
}

.third {
  width: 33.33333333%;
  background: blue;
  float: left;
  color: white;
  display: flex;
align-items: center;
justify-content: center;
}
.social {
flex-wrap: wrap;
align-items: stretch;
}
img {width: 100%;height:auto;}
<div class="container">

  <div class="half">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at ipsum tortor. Etiam ut lacus auctor, venenatis mauris vitae, scelerisque dolor. Mauris pulvinar purus libero, eget congue sem lobortis vitae.</p>
  </div>

  <div class="quater">
<img src="http://i68.tinypic.com/6yo87o.jpg" />
  </div>

  <div class="quater social">
<div class="third">Icon</div>
<div class="third">Icon</div>
<div class="third">Icon</div>
<div class="third">Icon</div>
<div class="third">Icon</div>
<div class="third">Icon</div>
  </div>

</div>

https://jsfiddle.net/atp1agmk/20/

1
Felix A J 14 Дек 2016 в 05:28

Вы можете сделать это с помощью Flex, как это

.half {
  width: 50%;
  background: yellow;
  float: left;
}

.quater {
   width: 25%;
   background: red;
   float: left;
}

.third {
   width: calc(100% / 3);
   height: calc(100% / 2);
   background: blue;
   float: left;
   color: white;
}

img {width: 100%; height: 100%;}

.container {
    display: flex;
}
1
Ruben Karapetyan 13 Дек 2016 в 11:51

Вы можете использовать свойство flex css для достижения ваших требований.

Вот пример. Вы можете оставить комментарий, если вам нужен другой способ.

1
Anil Talla 13 Дек 2016 в 11:49
Check which div height is greater and apply that to all divs.
Try this out

https://jsfiddle.net/nikhila/jv2jfuwL/

0
Nikhila K 13 Дек 2016 в 11:52