Меня беспокоит повторяющаяся проблема, когда я пытаюсь сделать сайты в стиле сетки, как мне сделать все 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/
И вот мой желаемый результат:
Я не против, если это должно быть сделано с помощью JavaScript либо
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/
Вы можете сделать это с помощью 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;
}
Вы можете использовать свойство flex css для достижения ваших требований.
Вот пример. Вы можете оставить комментарий, если вам нужен другой способ.
Check which div height is greater and apply that to all divs.
Try this out
https://jsfiddle.net/nikhila/jv2jfuwL/