Позиционирование элементов с помощью css

249

12 января 2018, 23:41

Как с помощью CSS разместить элементы так, как указано на картинке ниже? Мне нужно чтобы круги с датой располагались четко в центре, а слева и справа от них можно было писать текст. Также чтобы это было адаптивно. Пробовал с помощью флексбоксов, но не хватает команды "justify-self" для этого. Подскажите, как это возможно реализовать?

P.S. когда-то видел такую реализацию на сайтах, но не могу вспомнить где именно. Если кто-то знает сайт с подобной реализацией - буду рад, если поделитесь, там уже разберусь.

Answer 1

* { 
  box-sizing: border-box; 
} 
 
section { 
  width: 50%; 
  position: relative; 
  border: 1px solid transparent; 
} 
 
h2 { 
  margin: 1rem 0; 
  background: silver; 
  font-size: 1.5rem; 
  line-height: 2rem; 
} 
 
span { 
  position: absolute; 
  top: -1px; 
  line-height: 4rem; 
  width: 4rem; 
  text-align: center; 
  border-radius: 50%; 
  background: inherit; 
} 
 
section:nth-child(odd) { 
  border-right-color: black; 
  padding-right: 3em; 
} 
 
section:nth-child(odd) h2 { 
  margin-right: -3rem; 
  padding-right: 3rem; 
} 
 
section:nth-child(odd) span { 
  right: -2rem; 
} 
 
section:nth-child(even) { 
  border-left-color: black; 
  margin-left: auto; 
  padding-left: 3em; 
} 
 
section:nth-child(even) h2 { 
  margin-left: -3rem; 
  padding-left: 3rem; 
} 
 
section:nth-child(even) span { 
  left: -2rem; 
}

<section> 
  <h2>Первая секция<span>1970</span></h2> 
  <p>Как с помощью CSS разместить элементы так, как указано на картинке ниже? Мне нужно чтобы круги с датой располагались четко в центре, а слева и справа от них можно было писать текст. Также чтобы это было адаптивно. Пробовал с помощью флексбоксов, но не хватает команды "justify-self" для этого. Подскажите, как это возможно реализовать?</p> 
</section> 
<section> 
  <h2>Вторая секция<span>1980</span></h2> 
  <p>Как с помощью CSS разместить элементы так, как указано на картинке ниже? Мне нужно чтобы круги с датой располагались четко в центре, а слева и справа от них можно было писать текст. Также чтобы это было адаптивно. Пробовал с помощью флексбоксов, но не хватает команды "justify-self" для этого. Подскажите, как это возможно реализовать?</p> 
</section> 
<section> 
  <h2>Третья секция<span>1990</span></h2> 
  <p>Как с помощью CSS разместить элементы так, как указано на картинке ниже? Мне нужно чтобы круги с датой располагались четко в центре, а слева и справа от них можно было писать текст. Также чтобы это было адаптивно. Пробовал с помощью флексбоксов, но не хватает команды "justify-self" для этого. Подскажите, как это возможно реализовать?</p> 
</section>

Answer 2

Что-то типа того ...

.block_item { 
  position: relative; 
  width: 50%; 
  clear: both; 
  box-sizing: border-box; 
} 
 
.block_title { position: relative; } 
 
.block_titleYear { 
  position: absolute; 
  top: 50%; 
  width: 56px; 
  height: 56px; 
  line-height: 56px; 
  text-align: center; 
  margin: -28px 0 0 -28px; 
  border-radius: 50%; 
  z-index: 1; 
} 
 
.block_item:nth-child(2n-1) { float: left; } 
.block_item:nth-child(2n) { float: right; } 
 
.block_item:nth-child(2n-1)::after, 
.block_item:nth-child(2n)::after{ 
  content: ''; 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  width: 1px; 
  background-color: #000; 
} 
 
.block_item:nth-child(2n-1)::after { left: 100%; } 
.block_item:nth-child(2n)::after { left: 0; } 
 
.block_item:nth-child(2n-1) .block_titleYear { left: 100%; } 
.block_item:nth-child(2n) .block_titleYear { left: 0; } 
 
.block_item:nth-child(2n-1) .block_title, 
.block_item:nth-child(2n-1) .block_content { 
  padding-right: 56px; 
} 
 
.block_item:nth-child(2n) .block_title, 
.block_item:nth-child(2n) .block_content { 
  padding-left: 56px; 
} 
 
.block_item:nth-child(1) .block_title, 
.block_item:nth-child(1) .block_titleYear { 
  background-color: green; 
} 
 
.block_item:nth-child(2) .block_title, 
.block_item:nth-child(2) .block_titleYear { 
  background-color: red; 
} 
 
.block_item:nth-child(3) .block_title, 
.block_item:nth-child(3) .block_titleYear { 
  background-color: purple; 
}

<div class="block"> 
  <div class="block_item"> 
    <p class="block_title"> 
      <span class="block_titleYear">1970</span> 
      <span class="block_titleText">Заголовок №1</span> 
    </p> 
    <div class="block_content"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
    </div> 
  </div> 
  <div class="block_item"> 
    <p class="block_title"> 
      <span class="block_titleYear">1970</span> 
      <span class="block_titleText">Заголовок №1</span> 
    </p> 
    <div class="block_content"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
    </div> 
  </div> 
  <div class="block_item"> 
    <p class="block_title"> 
      <span class="block_titleYear">1970</span> 
      <span class="block_titleText">Заголовок №1</span> 
    </p> 
    <div class="block_content"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
    </div> 
  </div> 
</div>