Временная шкала с изображениями в центре - PullRequest
Новая
       44

Временная шкала с изображениями в центре

0 голосов
/ 24 марта 2020

Может кто-нибудь помочь мне?!

Я пытаюсь закодировать PSD-файл в HTML и CSS, но я борюсь с одним из разделов. Вот изображение того, что я хочу сделать:

Нажмите здесь

Проблема в том, что я не знаю, как поместить изображение в шкалу времени. Я пытался добавить изображение в :: after psuedo, но я не думаю, что это правильный способ сделать это.

Это мой HTML Код: 

<section class="about">
    <div class="wrapper">
        <h3>About Us</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
    <div class="container left">
            <div class="content">
                <h5>JULY 2010<br> Our Humble Beginnings</h5>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
            </div>
        </div>

        <div class="container right">
            <div class="content">
                <h5>January 2011<br> Facing Startups Battles</h5>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
            </div>
        </div>
    </div>
</section>

Это мой CSS код: 

    .about .wrapper{
        padding: 80px 10%;
        text-align: center;
        position: relative;
    }

    .about .wrapper::after{
        content: '';
        position: absolute;
        top: 200px;
        bottom: 0;
        width: 6px;
        background: red;
    }

    .about h5{
        line-height: 1.5;
        font-size: 1em;
        padding-bottom: .5em;
    }

    .about .container{
        position: relative;
        width: 50%;
        top: 60px;
        margin: 0 0 60px 0;
    }

    .about .container::after{
        content: 'How Can I Add an Image Here in this circle?';
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        top: 20px;
        right: -104px;
        background-color: blue; /* Just because there is no image */
        background-image: url(assets/img/about-1.png);
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 2;
    }

    .left{
        text-align: right;
    }

    .right{
        text-align: right;
    }

    .content{
        padding: 30px 0px 80px 0px;
    }

    .left .content{
    padding-right: 140px;
    }
    .right .content{
      padding-left: 140px
    }
    .right{
    text-align: left;
  left: 50%;


    }

.right:after {
    left: -104px;
    }

Я думаю, что это называется временной шкалой, есть много уроков, говорящих о том, как сделать что-то подобное, но я не знаю, как сделать изображения на временной шкале. Можете ли вы помочь мне сделать это?

Спасибо

Ответы [ 2 ]

0 голосов
/ 25 марта 2020

Попробуйте это: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="main.css" />

<title></title>
</head>
<body>
<section class="about">
    <div class="wrapper">
        <div>
            <h3>About Us</h3>
            <p>Lorem ipsum dolor sit amet consectetur.</p>
        </div>
        <div id="container">
          <div class="row">
             <div id="col1" class="col right">
                  <h5>JULY 2010<br> Our Humble Beginnings</h5>
                  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>

              </div>
             <div id="col2" class="col"><img class="img" src="assets/img/about-1.png"/></div>
          </div>
          <div class="row2" >
              <div id="col3" class="col"><img class="img" src="assets/img/about-1.png"/></div>
              <div id="col4" class="col left">
                  <h5>JULY 2010<br> Our Humble Beginnings</h5>
                  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
              </div>
          </div>
        </div>
    </div>
</section>
</body>
</html>

в основном. css файл: 

   .about .wrapper{
        padding: 80px 10%;
        text-align: center;

    }
    .about h5{
        line-height: 1.5;
        font-size: 1em;
        padding-bottom: .5em;
    }

    .row {
      width: 59%;
      margin-right: 41%;
      display: flex;
    }
    .row2 {
      width: 59%;
      display: flex;
      margin-left: 41%;
    }
    .col {
      flex:1;    
    }
    .col.left {
      text-align: left;
    }
    .col.right {
      text-align: right;    
    }
    #col2 {
      flex-basis: 30%;
    }
    #col1 { 
      flex-basis: 70%;    
    }
    #col3 {
      flex-basis: 30%;
    }
    #col4 { 
      flex-basis: 70%;    
    }
    .img {
        margin: 10% 5%;
        width: 90%;
        border-radius: 50%;
     }

     #container {
      background-image: linear-gradient(lightgrey,lightgrey);
      background-size: 2px 100%;
      background-repeat: no-repeat;
      background-position: center center;
     }

assets/img/about-1.png
поместите это в активах / img /about-1.png

0 голосов
/ 24 марта 2020

Чтобы построить это, вы можете использовать css макет сетки (руководство: https://css-tricks.com/snippets/css/complete-guide-grid/)

Рассматривать каждый контент + изображение как строку в макете. И каждая строка в качестве контейнера для сетки.

Вы можете визуально разбить каждую строку до 3 столбцов. Один столбец для левого содержимого, второй для изображения и третий для правого содержимого.

Пример css сетка для макета, подобного следующему: 

.grid-container {
  display: grid;
  grid-template-columns: 1fr 10em 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "content-left image content-right";
  text-align: center;
}

.content-left { grid-area: content-left; background: lightblue; }

.image { grid-area: image; background: lightgreen; }

.content-right { grid-area: content-right; background: lightblue; }
<div class="grid-container">
  <div class="content-left">Left content</div>
  <div class="image">Image</div>
  <div class="content-right">Right content</div>
</div>

(сетка, сгенерированная с помощью: https://grid.layoutit.com/)

Для чередования содержимого слева и справа , вы можете использовать css четные / нечетные селекторы ( Как я могу стилизовать четные и нечетные элементы? ), чтобы установить, какая область сетки используется для элемента.

Пример:

Я построил пример макета временной шкалы для этого ответа, который вы можете найти по адресу https://codepen.io/hendrysadrak/pen/VwLEraz

...