0

Если применить display: flex, то не получится сделать, как на скрине ниже

введите сюда описание изображения


Вот то, как это попытался сделать я:

.info {
  margin-bottom: 170px;
}

.info__title {
  font-size: 48px;
  line-height: 1.2;
  color: #333333;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 80px;
  font-weight: 900;
}

.info__wrap {
  display: flex;
  background-color: #F9F9F9;
  border: 4px solid #051367;
  border-radius: 15px;
}

.info__item {
  width: calc(100% / 3);
  padding: 42px;
  padding-bottom: 80px;
}

.info__item:nth-child(2) {
  background-color: #051367;
  border-radius: 15px;
}

.info__item:nth-child(2) .info__subtitle,
.info__item:nth-child(2) .info__text p {
  color: #fff;
}

.info__item:nth-child(2) .info__text p {
  text-align: left;
}

.info__subtitle {
  font-size: 24px;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 42px;
}

.info__text p {
  font-size: 18px;
  line-height: 2;
  color: #333;
  text-align: center;
}

.info__text p:not(:last-child) {
  margin-bottom: 10px;
}

.info__text p span {
  font-weight: 700;
}

.info__text ul li {
  font-size: 18px;
  line-height: 2;
  color: #fff;
}
<div class="info__wrap">
  <div class="info__item">
    <p class="info__subtitle">lorem loremlorem lorem lorem lorem:</p>
    <div class="info__text">
      <p>lorem loremlorem lorem lorem lorem</p>
      <p>lorem loremlorem lorem lorem lorem</p>

    </div>
  </div>
  <div class="info__item">
    <p class="info__subtitle">lorem loremlorem lorem lorem lorem:</p>
    <div class="info__text">
      <ul>
        <li>lorem lorem</li>
        <li>lorem lorem</li>
      </ul>
      <p>lorem lorem lorem loremlorem loremlorem loremlorem lorem</p>
    </div>
  </div>
  <div class="info__item">
    <p class="info__subtitle">lorem loremlorem lorem lorem lorem:</p>
    <div class="info__text">
      <p>lorem loremlorem lorem lorem lorem</p>
      <p>lorem loremlorem lorem lorem lorem</p>

    </div>
  </div>
</div>

4
  • если увидеть ваш код, можно будет сказать, что не так.
    – Maneken
    25 апр в 19:42
  • задайте ему бОльшую высоту ) 25 апр в 19:43
  • @Maneken, jsbin.com/conilepege/edit?html,css,output
    – front
    25 апр в 19:51
  • Сделать второй блок с высотой родительского элемента, а первый и третий чуть меньше род.элемента и прижать к нижней границе родительского элемента
    – Iurii
    25 апр в 20:12

1 ответ 1

0

это делается примерно так. странно, что тут показывает вообще не так как у меня в браузере...

 body {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
 }
 .infoItem {
  width: calc(100%/3);
 }
 .container {
  height: 60vh;
  border-top: 1px solid blue;
  border-left: 1px solid blue;
  border-bottom: 1px solid blue;
  border-radius: 20px 0px 0px 20px;
 }
 .container1 {
  height: 70vh;
  background: blue;
  border-radius: 20px 20px 0px 0px;
 }

 .container2 {
  height: 60vh;
  border-top: 1px solid blue;
  border-right: 1px solid blue;
  border-bottom: 1px solid blue;
  border-radius: 0px 20px 20px 0px;
 }
<body>
  <div class="infoItem container"></div>
  <div class="infoItem container1"></div>
  <div class="infoItem container2"></div>
</body>

1
  • Если вы были внимательнее, поняли в чем ваша ошибка) 25 апр в 21:00

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.