html - 同一行中带有图标的更多文本

Question

<分区>

Answer 1

我认为这是您正在寻找的东西。它对你有反应，所以你可以有点灵活。我在 css 中创建了一个圆圈，但您可以轻松地用图像将其切换或自己将其放入圆圈中。

https://jsfiddle.net/7r6gL7hc/

<div class="container">
  <div class="column">
    <div class="circle"></div>
    <div class="title">Title</div>
    <div class="description"> This is where you would put a description</div>
  </div>
  <div class="column">
    <div class="circle"></div>
    <div class="title">Title</div>
    <div class="description"> This is where you would put a description</div>
  </div>
  <div class="column">
    <div class="circle"></div>
    <div class="title">Title</div>
    <div class="description"> This is where you would put a description</div>
  </div>
  <div class="column">
    <div class="circle"></div>
    <div class="title">Title</div>
    <div class="description"> This is where you would put a description</div>
  </div>
</div>

CSS:

.container { max-width:800px; margin: 0 auto;}

.column { width: 25%; text-align: center; float: left;}

.circle { background: red; border: black 6px solid; border-radius: 50%; width: 150px; height: 150px; color: black; margin: 0 auto;}

.title { text-align: center; width:100%; font-size: 30px; padding: 10px 0; text-decoration: underline; text-transform: uppercase;}

.description { text-align: center; width: 100%; max-width: 100px; margin: 0 auto;}