Как адаптивно делать такие блоки?

214

26 апреля 2018, 07:04

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

Answer 1

На пространство имён не обращай внимание

Эта моя версия как расположить эту линию

codepen.io/topicstarter/ для проверки работы

* { 
  margin: 0; 
  padding: 0; 
} 
 
items, 
item { 
  display: block; 
} 
 
items { 
  display: flex; 
  justify-content: space-between; 
  border-bottom: 1px solid #ccc; 
  padding-bottom: 40px; 
} 
 
item { 
  width: 150px; 
  height: 150px; 
  background: #fbfbfb; 
  display: flex; 
  align-items: flex-end; 
  position: relative; 
  margin: 0 2px; 
  text-align: center; 
} 
 
wrapper { 
  display: block; 
  width: 90%; 
  margin: 50px auto; 
} 
 
item-content { 
  font-size: .8em; 
  background: #fff; 
  padding: 6px 0; 
  width: 100%; 
  height: 30px; 
} 
 
.item1:before, 
.item2:before, 
.item3:before, 
.item4:before, 
.item5:before { 
  content: ""; 
  display: block; 
  width: 10px; 
  height: 10px; 
  background: #ccc; 
  border-radius: 50%; 
  position: absolute; 
  left: 50%; 
  margin-top: 45px; 
} 
 
@media (max-width:600px) { 
  wrapper { 
    display: block; 
    height: 100vh; 
  } 
  items { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: flex-start; 
    height: inherit; 
  } 
  item { 
    width: 45%; 
    display: flex; 
    height: 150px; 
    margin: 0; 
    border-bottom: 1px solid #ccc; 
    position: relative; 
  } 
  .item1:before, 
  .item2:before, 
  .item3:before, 
  .item4:before, 
  .item5:before { 
    content: ""; 
    display: block; 
    width: 10px; 
    height: 10px; 
    border-radius: 50%; 
    position: absolute; 
    top: 70%; 
    margin-top: 40px; 
  } 
  .item1:after { 
    content: ""; 
    display: block; 
    width: 100%; 
    height: 200px; 
    border-left: 1px solid #ccc; 
    position: absolute; 
  } 
  .item4:after { 
    content: ""; 
    display: block; 
    height: 200px; 
    border-right: 1px solid #ccc; 
  } 
  .item5:after { 
    content: ""; 
    display: block; 
    width: 100%; 
    height: 200px; 
    border-left: 1px solid #ccc; 
    position: absolute; 
  } 
}

<wrapper> 
  <items> 
    <item class="item1"> 
      <item-content> 
        <p>Lorem ipsum dolor sit amet .</p> 
      </item-content> 
    </item> 
    <item class="item2"> 
      <item-content> 
        <p>Lorem ipsum dolor sit amet </p> 
      </item-content> 
    </item> 
    <item class="item3"> 
      <item-content> 
        <p>Lorem ipsum dolor sit amet consec</p> 
      </item-content> 
    </item> 
    <item class="item4"> 
      <item-content> 
        <p>Lorem ipsum dolor sit amet.</p> 
      </item-content> 
    </item> 
    <item class="item5"> 
      <item-content> 
        <p>Lorem ipsum dolor sit amet </p> 
      </item-content> 
    </item> 
  </items> 
</wrapper>