Question

我有一些困难要求做一件相对容易的事情，但无论我怎样尝试我都无法让我的DIV能够集中在一个区域内。

所以这里......

<section>

<div style="width: 100%; margin: 0 auto; float: left; text-align:center;">

<div style="float: left;"><span class="circle">test</span></div>
<div style="float: left;"><span class="circle">test</span></div>
<div style="float: left;"><span class="circle">test</span></div>
<div style="float: left;"><span class="circle">test</span></div>
<div style="float: left;"><span class="circle">test</span></div>

</div>

</section>


.circle {
    border-radius: 200%;
    width: 500px;
    height: 500px;
    background-color: #3B5163;
    padding: 50px;
    margin: 0 40px 0 40px;
}

所以我需要将它们分开，使用均匀的边距，当屏幕按比例缩小时，它们几乎叠在一起......但无论我在这里改变形式，div都会在包裹内留在左边div，不要按比例缩小。

Answer 1

<section>
  <div class="container">
    <div><span class="circle">test</span></div>
    <div><span class="circle">test</span></div>
    <div><span class="circle">test three></span></div>
    <div><span class="circle">test</span></div>
    <div><span class="circle">test</span></div>
  </div>
</section>

您可以像使用text-align: center一样使用.container { text-align: center; } .container div { display: inline-block; }，但要实现这一点，div必须是内联或内联块元素，如下所示：

style

您可以在{{1}}属性中添加这些属性，就像您一样，但在大多数情况下，最好将其添加到单独的css文件中。

以一排div为中心

1 个答案: