Позиционирование с помощью CSS Grid - PullRequest
Новая
       15

Позиционирование с помощью CSS Grid

1 голос
/ 22 сентября 2019

Зеленая линия должна быть нарисована до нижней границы в виде временной шкалы.Длина рассчитывается по каждой секции уникальной cssgrid высоты в JavaScript.Все записи выглядят абсолютно одинаковыми по кодовой базе, но по любой причине отображается только самый верхний.Я пытался поиграться с position: absolute и position: relative как для контента, так и для зеленой линии, но это не сработало.

Есть что-то скрытое или выше другого?

#cssgrid {
  display: grid;
  grid-template-columns: 50px auto;
  grid-template-rows: 60px 40xp auto;
  grid-template-areas: "b h" "b t" "b d";
}
<div>
  <div id="line" style="position: absolute;"></div>
  <div id="cssgrid">
    <div id="grid-bulletpoint">
      <div class="bulletpoint"></div>
    </div>
    <div id="grid-headline">
      <h2>...</h2>
    </div>
    <div id="grid-time">
      <p>...</p>
    </div>
    <div id="grid-description">
      <p>...</p>
    </div>
  </div>
</div>

Screenshot: false positioning

Ответы [ 2 ]

1 голос
/ 22 сентября 2019

Вы можете использовать псевдо-класс: before, чтобы добавить точку, сделав ее position: absolute.

#cssgrid {
  margin-left: 100px;
}

.boxContainer {
  border-left: 5px solid green;
  padding-left: 37px;
  margin-bottom: -20px;
  padding-top: 20px;
}

.grid-headline {
  position: relative;
}

.grid-headline:before {
  content: ' ';
  width: 20px;
  height: 20px;
  background: orange;
  position: absolute;
  left: -50px;
  top: 0;
  border-radius: 50%;
}

#grid-description p {
  margin-bottom: 0;
}
<div id="cssgrid">
  <div class="boxContainer">
    <div class="grid-headline">
      <h2>Entry</h2>
    </div>
    <div id="grid-time">
      <p>1989</p>
    </div>
    <div id="grid-description">
      <p>Lorem ipsum text...</p>
    </div>
  </div>
  <div class="boxContainer">
    <div class="grid-headline">
      <h2>Entry</h2>
    </div>
    <div id="grid-time">
      <p>1989</p>
    </div>
    <div id="grid-description">
      <p>Lorem ipsum text...</p>
    </div>
  </div>
</div>
0 голосов
/ 23 сентября 2019

Вы можете по-разному организовать свою сетку. Смотрите таблицу времени (Timeline Grid) здесь На мой взгляд, это красота CSS Grid.Проверьте этот код: (В конце я добавил код для SVG, если вы хотите использовать его тоже) 

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <title>Grid CSS Timelin</title>
    <style>
        #thetime {
            display: grid;
            grid-template-columns: 50px 1fr;
            grid-template-rows: 1fr 1fr 1fr;
        }

        #timeline {
            background-color: rgba(193, 240, 104, 0.36);
            border: 1px solid #0031ff;
            justify-self: center;
        }

        .timebar  {
            width: 10px;
            height: 100%;
            color: transparent;
            background-color: #00ff1d;
        }

        ul {
            list-style: none;

            justify-self: start;
            margin-left: 0;
            padding: 0;
        }
        li {
            background-color: rgba(141, 240, 240, 0.36);
            border: 1px solid #ff00ff;
            margin: 1.5 rem 0;
            position: relative;
        }

        li:before {
            content: " ";
            background-size: cover;
            background-image: url("/circle2.svg");
            width: 1.5rem;
            height: 1.5rem;
            position: absolute;
            left: -2.3rem;
            margin-top: 1.25rem;
        }

        h2 {

        }

        time {
        font-family: monospace;
        }

        p {

        }

    </style>
</head>

<body>
    <section id="thetime">
        <div id="timeline">
            <div class="timebar">X</div>
        </div>
           <ul>
            <li>
                <h2>
                    Entry #1
                </h2>
                <time>
                    01.01.1900 - 31.12.1900
                </time>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam praesentium totam nihil, molestiae officiis reiciendis voluptatum numquam! Ab inventore quos repudiandae, accusamus quibusdam blanditiis facere optio asperiores aliquam consectetur.
                </p>

            </li>

            <li>
                <h2>
                    Entry #2
                </h2>
                <time>
                    01.01.1900 - 31.12.1900
                </time>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam praesentium totam nihil, molestiae officiis reiciendis voluptatum numquam! Ab inventore quos repudiandae, accusamus quibusdam blanditiis facere optio asperiores aliquam consectetur.
                </p>

            </li>

            <li>
                <h2>
                    Entry #3
                </h2>
                <time>
                    01.01.1900 - 31.12.1900
                </time>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam praesentium totam nihil, molestiae officiis reiciendis voluptatum numquam! Ab inventore quos repudiandae, accusamus quibusdam blanditiis facere optio asperiores aliquam consectetur.
                </p>

            </li>

            <li>
                <h2>
                    Entry #4
                </h2>
                <time>
                    01.01.1900 - 31.12.1900
                </time>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam praesentium totam nihil, molestiae officiis reiciendis voluptatum numquam! Ab inventore quos repudiandae, accusamus quibusdam blanditiis facere optio asperiores aliquam consectetur.
                </p>

            </li>
        </ul>


    </section>

</body>

</html>


    <?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFF00;}
</style>
<circle class="st0" cx="10" cy="10" r="10"/>
</svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...