时间戳

首页 > 解决方案 > UI 设计 - 内容发布的左图像边框

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

问题描述

我目前有一个正在为网站制作的模型。但是，我需要一些帮助。

页面的主要内容会有帖子，在左侧会有一个边框，但最初会有一个圆圈（表示帖子）。我需要弄清楚如何做到这一点。你能帮我吗？

尝试 1

索引.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;
    }

}

我想要的图片

后边界图像]

我所做的结果：

后边框图像失败]

标签： htmlcssimagepost

解决方案

欢迎来到 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>

推荐阅读