Как сделать три блока одинаковой высоты в CSS с отступами?
680
15 января 2017, 17:01
Как создать три резиновых блока одинаковой высоты, чтобы контур был как на картинке? Испробовал различные варианты, не получается найти решение. С таблицей почему-то не получается добиться одинакового контура по высоте. Изначально пробовал этот html, потом пробовал добавлять обертки: С кругами сложности нет, только с обводкой на резиновых блоках.
.blocks-promo {
position: relative;
width: 100%;
margin: 40px 0;
}
.block-promo-wrapper {
position: relative;
width: 33.3333%;
float: left;
padding: 50px 10px 0;
margin-bottom: 30px;
}
.block-promo-icon-assortiment,
.block-promo-icon-otnosheniia,
.block-promo-icon-opyt {
position: absolute;
top: 0px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
margin: 0 auto;
-webkit-backface-visibility: hidden;
height: 100px;
width: 100px;
border-radius: 100px;
background-color: #95c12b;
}
.block-promo-icon-assortiment:before,
.block-promo-icon-otnosheniia:before,
.block-promo-icon-opyt:before {
content: '';
position: absolute;
height: 48px;
width: 48px;
top: 26px;
left: 26px;
}
.block-promo-icon-assortiment:before {
background: url('../images/ic_shopping_cart_white_48px.svg') no-repeat;
}
.block-promo-icon-otnosheniia:before {
background: url('../images/ic_group_white_48px.svg') no-repeat;
}
.block-promo-icon-opyt:before {
background: url('../images/ic_star_white_48px.svg') no-repeat;
}
.block-promo-content {
padding: 80px 20px 30px;
border: 1px solid #e0e0e0;
}
.block-promo-title {
text-align: center;
}
@media only screen and (max-width: 770px) {
.block-promo-wrapper {
width: 100%;
}
}<div class="blocks-promo">
<div class="block-promo-wrapper">
<span class="block-promo-icon-assortiment"></span>
<div class="block-promo-content">
<h2 class="block-promo-title">Заголовок</h2>
<p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
</div>
</div>
<div class="block-promo-wrapper">
<span class="block-promo-icon-otnosheniia"></span>
<div class="block-promo-content">
<h2 class="block-promo-title">Заголовок</h2>
<p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
</div>
</div>
<div class="block-promo-wrapper">
<span class="block-promo-icon-opyt"></span>
<div class="block-promo-content">
<h2 class="block-promo-title">Заголовок</h2>
<p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
</div>
</div>
</div>Answer 1
Вариант с использованием display: table
Для отступов используем border-spacing
Таблицу делим на колонки равной ширины с помощью table-layout: fixed
Ширина колонок в этом случае определяется либо с помощью тега <col>, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.b {
display: table;
width: 100%;
table-layout: fixed;
height: 50px;
border-spacing: 10px 65px;
}
.b-item {
display: table-cell;
vertical-align: top;
border: 1px solid #ccc;
padding: 15px;
position: relative;
}
.b-item-circle {
margin: -65px auto 10px auto;
width: 100px;
height: 100px;
background: green;
border-radius: 50%;
}
.b-item-title {
text-align: center;
font-size: 24px;
font-weight: 700;
text-transform: uppercase;
}<div class="b">
<div class="b-item">
<div class="b-item-circle"></div>
<div class="b-item-title">title</div>
<div class="b-item-text">text</div>
</div>
<div class="b-item">
<div class="b-item-circle"></div>
<div class="b-item-title">title</div>
<div class="b-item-text">Как создать три резиновых блока одинаковой высоты, чтобы контур был как на картинке? Испробовал различные варианты, не получается найти решение. С таблицей почему-то не получается добиться одинакового контура по высоте. Изначально пробовал этот html,
потом пробовал добавлять обертки: С кругами сложности нет, только с обводкой на резиновых блоках.</div>
</div>
<div class="b-item">
<div class="b-item-circle"></div>
<div class="b-item-title">title</div>
<div class="b-item-text">text</div>
</div>
</div>Answer 2
Могу предложить реализацию этой проблемы с помощью flexbox. Так блоки выйдут более гибкими. Так же я установлю фиксированную высоту для .text, что бы вы увидели, что высота родительского блока остаётся одинаковой (можно фиксированную высоту убрать):
body {font-family: arial;}
.blocks {
display: flex;
width: 100%;
margin-top: 40px;
}
.blocks .block {
position: relative;
padding: 35px 8px 8px 8px;
margin: 3px;
border: 1px solid #efefef;
flex: 1;
}
.blocks .block .circle {
position: absolute;
top: 0;
left: 50%;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #95c12c;
transform: translate(-50%, -50%);
}
.blocks .block .title {
width: 80%;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
background-color: #e1e1e1;
padding: 4px;
font-size: 0.8rem
}
.blocks .block .text {
margin: 0 auto;
text-transform: uppercase;
background-color: #e1e1e1;
margin-top: 5px;
padding: 4px;
font-size: 1rem;
text-align: center;
padding-top: 20px;
}<div class="blocks">
<div class="block">
<div class="circle"></div>
<div class="title">Заголовок</div>
<div class="text" style="height: 80px;">Текст</div>
</div>
<div class="block">
<div class="circle"></div>
<div class="title">Заголовок</div>
<div class="text" style="height: 60px;">Текст</div>
</div>
<div class="block">
<div class="circle"></div>
<div class="title">Заголовок</div>
<div class="text" style="height: 70px;">Текст</div>
</div>
</div>Answer 3
Проблема была с padding'ом, сейчас все работает.
Когда вы в блок добавляете padding, это всегда за счет ширины, и тогда блок не встает на свое место.
.blocks-promo {
position: relative;
display:flex;
align-items:stretch;
width: 100%;
margin: 40px 0;
}
.block-promo-wrapper {
width: 33%;
float: left;
padding-right:50px;
margin-bottom: 30px;
}
.block-promo-icon-assortiment,
.block-promo-icon-otnosheniia,
.block-promo-icon-opyt {
position: absolute;
top: 0px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
margin: 0 auto;
-webkit-backface-visibility: hidden;
height: 100px;
width: 100px;
border-radius: 100px;
background-color: #95c12b;
}
.block-promo-icon-assortiment:before,
.block-promo-icon-otnosheniia:before,
.block-promo-icon-opyt:before {
content: '';
position: absolute;
height: 48px;
width: 48px;
top: 26px;
left: 26px;
}
.block-promo-icon-assortiment:before {
background: url('../images/ic_shopping_cart_white_48px.svg') no-repeat;
}
.block-promo-icon-otnosheniia:before {
background: url('../images/ic_group_white_48px.svg') no-repeat;
}
.block-promo-icon-opyt:before {
background: url('../images/ic_star_white_48px.svg') no-repeat;
}
.block-promo-content {
padding: 80px 20px 30px;
border: 1px solid #e0e0e0;
height: calc(100% - 110px)
}
.block-promo-title {
text-align: center;
}
@media only screen and (max-width: 770px) {
.block-promo-wrapper {
width: 100%;
}
.blocks-promo {
position: relative;
display:block;
align-items:stretch;
width: 100%;
margin: 0px;
}
}<div class="blocks-promo">
<div class="block-promo-wrapper">
<span class="block-promo-icon-assortiment"></span>
<div class="block-promo-content">
<h2 class="block-promo-title">Заголовок</h2>
<p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
</div>
</div>
<div class="block-promo-wrapper">
<span class="block-promo-icon-otnosheniia"></span>
<div class="block-promo-content">
<h2 class="block-promo-title">Заголовок</h2>
<p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
</div>
</div>
<div class="block-promo-wrapper">
<span class="block-promo-icon-opyt"></span>
<div class="block-promo-content">
<h2 class="block-promo-title">Заголовок</h2>
<p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
</div>
</div>
</div>Answer 4
Вам нужен Flex
.blocks-promo {
display: flex;
align-items: stretch;
}
Вложенный элемент посчитайте от 100% высоты - отсутпы:
.block-promo-content {
height: calc(100% - 110px)
}
.blocks-promo {
position: relative;
width: 100%;
margin: 40px 0;
display: flex;
align-items: stretch;
}
.block-promo-wrapper {
position: relative;
width: 33%;
float: left;
padding: 50px 10px 0;
margin-bottom: 30px;
}
.block-promo-icon-assortiment,
.block-promo-icon-otnosheniia,
.block-promo-icon-opyt {
position: absolute;
top: 0px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
margin: 0 auto;
-webkit-backface-visibility: hidden;
height: 100px;
width: 100px;
border-radius: 100px;
background-color: #95c12b;
}
.block-promo-icon-assortiment:before,
.block-promo-icon-otnosheniia:before,
.block-promo-icon-opyt:before {
content: '';
position: absolute;
height: 48px;
width: 48px;
top: 26px;
left: 26px;
}
.block-promo-icon-assortiment:before {
background: url('../images/ic_shopping_cart_white_48px.svg') no-repeat;
}
.block-promo-icon-otnosheniia:before {
background: url('../images/ic_group_white_48px.svg') no-repeat;
}
.block-promo-icon-opyt:before {
background: url('../images/ic_star_white_48px.svg') no-repeat;
}
.block-promo-content {
padding: 80px 20px 30px;
border: 1px solid #e0e0e0;
height: calc(100% - 110px)
}
.block-promo-title {
text-align: center;
}
@media only screen and (max-width: 770px) {
.block-promo-wrapper {
width: 100%;
}
}<div class="blocks-promo">
<div class="block-promo-wrapper">
<span class="block-promo-icon-assortiment"></span>
<div class="block-promo-content">
<h2 class="block-promo-title">Заголовок</h2>
<p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
</div>
</div>
<div class="block-promo-wrapper">
<span class="block-promo-icon-otnosheniia"></span>
<div class="block-promo-content">
<h2 class="block-promo-title">Заголовок</h2>
<p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
</div>
</div>
<div class="block-promo-wrapper">
<span class="block-promo-icon-opyt"></span>
<div class="block-promo-content">
<h2 class="block-promo-title">Заголовок</h2>
<p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
</div>
</div>
</div>
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
-
07:46
-
21:56
Перевод документов на английский язык: Важность и ключевые аспекты
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47548 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30491 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23621 visits
- Как через css изменить цвет png изображения? 10345 visits
- Blob video url download 9953 visits
- Php curl запрос через прокси с авторизацией 9205 visits
- Работа с captcha vk api 8087 visits
© "hostciti.net" 16.11.2024 | 23:42