Question

我很好奇是否有任何教程或示例代码的布局有3个圆圈并排在每个下面的文本。另外，它是响应性的，所以它只有1个圆圈，下面的文字然后是下一个，依此类推。感谢

Answer 1

如果您熟悉Bootstrap，可以尝试这样的事情。

<div class="row">
      <div class="col-sm-4">
        <div class="circle"></div>
        <span>This is a text</span>
      </div>
      <div class="col-sm-4">
        <div class="circle"></div>
        <span>This is a text</span>
      </div>
      <div class="col-sm-4">
        <div class="circle"></div>
        <span>This is a text</span>
      </div>
    </div>
    <style type="text/css">
      .circle{
       position: relative;
       border-radius: 50%;
       width: 100%;
       height: auto;
       padding-top: 100%;
       background: black;
      }
    </style>

Answer 2

也许你应该看一下bootstrap库。

 <html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
      <body>
        <div class="row">
          <div class="col-md-4">
            <img src="yourcirclepicture.png" alt="circle">
          </div>
          <div class="text">
            your text
          </div>
          <div class="col-md-4">
            <img src="yourcirclepicture.png" alt="circle">
          </div>
          <div class="text">
            your text
          </div>
          <div class="col-md-4">
            <img src="yourcirclepicture.png" alt="circle">
          </div>
          <div class="text">
            your text
          </div>
       </div>
    </body>
</html>

如果有enogh空格，则类行标识哪一个内容应该在一行中。如果窗口较小，则内容（每个col-md-4）将被放置在彼此之下。

别忘了包含bootstrap库。

可能就是全部。

3列圆圈和响应

2 个答案: