UI设计-内容发布的左图像边框

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>