Question

如何制作圆形图像的可滚动水平线，这些图像源自带有下方标题的方形图像。如果可能的话，让它彼此分开。抱歉语法错误

Answer 1

在我回答您的问题之前，请注意Stack Overflow不是一个要求代码的平台，而是寻求您自己编写的无法编写代码的帮助。正如CBroe所提到的，我们强烈建议您阅读How to Ask。不要指望将来这样的答案。

首先，问题是如何在我们进入CSS部分之前构建HTML中的元素。因为你要求排列多个具有“容器 - 元素”结构的元素似乎具有启发性。

div (container)

    div (element1)
    div (element2)
    div (element3)
    ...

/div

现在我们必须将圆形图像与下面的标题放在元素中。这也很简单：

div (element)

    img (circular picture)
    div (caption)

/div

让我们将其翻译成正确的HTML

<div class="container">

    <div class="elem">
        <img src=""/>
        <div>Caption #1</div>
    </div>

    <div class="elem">
        <img src=""/>
        <div>Caption #2</div>
    </div>

    <div class="elem">
        <img src=""/>
        <div>Caption #3</div>
    </div>

    ...

</div>

进入CSS的时间。截至目前，每个元素都是垂直对齐的，而不是水平对齐的。我个人非常喜欢的一个解决方案是Flexbox。它允许您动态播放多个元素，这正是我们正在寻找的。

.container {
    display: flex;
    overflow-x: scroll;
}

这足以使每个元素水平对齐，因为Flexbox默认情况下水平构建项目。 overflow-x: scroll;阻止项目调整网页大小，并使容器可以作为修复程序水平滚动。

唯一剩下的就是将图像制作成圆形，这非常容易。我们所要做的就是添加一个大于图像大小本身的border-radius：

.elem img {
    width: 100px;
    height: 100px;
    border-radius: 500px;
}

完成。

.container {
  display: flex;
  overflow-x: scroll;
}

.elem {
  padding: 8px;
}

.elem img {
  margin: 8px;
  background-color: grey;
  
  height: 100px;
  width: 100px;
  border-radius: 5000px;
}

.elem div {
  text-align: center;
  font-size: 18px;
}

<div class="container">
  <div class="elem">
    <img class="pic" src="https://www.famousbirthdays.com/headshots/justin-bieber-2.jpg" />
    <div>Caption #1</div>
  </div>

  <div class="elem">
    <img/>
    <div>Caption #2</div>
  </div>

  <div class="elem">
    <img/>
    <div>Caption #3</div>
  </div>

  <div class="elem">
    <img/>
    <div>Caption #4</div>
  </div>

  <div class="elem">
    <img/>
    <div>Caption #5</div>
  </div>

  <div class="elem">
    <img/>
    <div>Caption #6</div>
  </div>

  <div class="elem">
    <img/>
    <div>Caption #7</div>
  </div>
</div>

在图片之间放置文本

1 个答案: