Дизайн пользовательского интерфейса - левая граница изображения для публикации контента

Question

У меня сейчас есть макет, над которым я работаю для веб-сайта. Однако мне нужна помощь.

Основное содержимое страницы будет содержать посты, а слева - рамку, но изначально у нее будет круг (для обозначения после). Мне нужно выяснить, как это сделать. Вы можете помочь?

Попытка 1

index. html

<section>
    <div class="container">
        <div class="row">
            <div class="col-6">
                <div class="side">
                    <img src="assets/img/circle.png">
                    <div class="post-content">
                        <h1>Test</h1>
                    </div>
                </div>
            </div>
            <div class="col-6">
                Much Wow
            </div>
        </div>
    </div>
</section>

main. css

.col-6 {
    .side {
        display: inline-block;
        img {
            margin-top: 10px;
        }
    }
    .post-content {
        border-left: 1px solid red;
        position: absolute;
        left: 31px;
        padding-left: 32px;
        display: inline-block;
    }

}

Изображение того, что я хочу

]

Результат того, что я сделал:

]

Answer 1

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

Мы все разработчики в той или иной форме на этом сайте, и никто не хочет делать работу другого человека для них ... в общем.

Учитывая, что вы новый участник, я подумал, что все равно смогу это исправить!

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

В моем примере - который вы можете взять или оставить, на ваше усмотрение - я отделяю заголовок сообщения от раздела сообщения. Раздел сообщения получает left-border, в то время как я полагаюсь на псевдоэлемент :before для создания декоративного круга. Таким образом, вы получаете максимальную гибкость в отношении размера контента и одновременно получаете желаемый эффект, который вам нужен.

Еще раз добро пожаловать в StackOverflow! Надеюсь, это хорошее вступление, в следующем вопросе обязательно укажите нам на вещи, которые вы уже пробовали, а не общее «как мне это сделать?»

:)

.section {
  background-color: #000;
  padding: 20px;
}

.section__title {
  padding: 0 40px;
  margin: 0;
  position: relative;
  color: #31a3ee;
}

.section__title:before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  top: 0;
  left: 0;
  border: 2px solid #fff;
  border-radius: 100%;
}

.section__content {
  border-left: 2px solid #31a3ee;
  padding: 2px 30px;
  margin: 5px 10px;
  color: #fff;
}

<div class="section">

  <h3 class="section__title">Post Title</h3>
  <div class="section__content">
    <p>Impedit numquam laborum ut et omnis quasi cupiditate. Fugit numquam quibusdam laudantium placeat. Quod corporis quisquam repudiandae voluptas est.</p>

    <p>Illum provident tempore facere ipsam reiciendis quos ut. Quaerat at eos sint ut sint ipsum laboriosam non. Magni aut occaecati amet asperiores.</p>
  </div>

  <h3 class="section__title">Post Title</h3>
  <div class="section__content">
    <p>Impedit numquam laborum ut et omnis quasi cupiditate. Fugit numquam quibusdam laudantium placeat. Quod corporis quisquam repudiandae voluptas est.</p>

    <p>Illum provident tempore facere ipsam reiciendis quos ut. Quaerat at eos sint ut sint ipsum laboriosam non. Magni aut occaecati amet asperiores.</p>
  </div>

</div>