0

Каким образом можно разместить ее между блоками? Линия

1
  • да способов просто куча. Например: сверху 3 блока - снизу 2 (как в блочной верстке). или используя position:absolute...или еще что нить. 3 авг 2019 в 6:58

1 ответ 1

2

Если что то не ясно спросите - я поясню

Здесь лучше отображается: https://codepen.io/topicstarter/pen/GVMvjM

html,
body {
  margin: 0;
  padding: 0;
  text-align: center;
}

.items {
  display: inline-flex;
  justify-content: space-between;
}

.item {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 280px;
  height: 320px;
  text-align: center;
  position: relative;
  box-sizing: border-box;
}

ion-icon {
  font-size: 60px;
}

.item p {
  width: 90%;
}

.item:nth-of-type(1):after,
.item:nth-of-type(2):after {
  content: "";
  position: absolute;
  top: 40px;
}

.item:nth-of-type(1):after {
  width: 20%;
  height: 3px;
  background: #000;
  right: 0;
}

.item:nth-of-type(2):after {
  width: 20%;
  height: 3px;
  background: #000;
  left: 0;
}
<div class="items">
  <div class="item">
    <ion-icon name="analytics"></ion-icon>
    <h2>
      <b>
        analitics & insinght
      </b>
    </h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, sequi beatae. Dolor voluptatem a repellendus rem quaerat, sunt enim laboriosam?</p>
  </div>
  <div class="item">
    <ion-icon name="calendar"></ion-icon>
    <h2>
      <b>
        organize your deadline
      </b>
    </h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis similique officiis doloremque perferendis praesentium a quae commodi </p>
  </div>
</div>

<script src="https://unpkg.com/ionicons@4.2.2/dist/ionicons.js"></script>

Ваш ответ

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

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