Question

您好我有3张图片在div内。我设法使div居中，但其中的图像仍然贴在左边。我想将这些图像居中并均匀分布大约5像素。当屏幕的宽度很窄，即电话尺寸时，我希望这些图像最终垂直堆叠而不是调整为变小但保持水平。

我到目前为止（html）：

        <section id="events" class="main style3 primary">
                <div><a href="http://www.residentadvisor.net/event.aspx?682679"><img src="images/posters/minivalbigfoots.jpg" class="event-posters" alt="ties spencer parker minival bigfoots tickets" /></a></div>

                <div><a href="http://www.residentadvisor.net/event.aspx?682679"><img src="images/posters/minivalbigfoots.jpg" class="event-posters" alt="ties spencer parker minival bigfoots tickets" /></a></div>

                <div><a href="http://www.residentadvisor.net/event.aspx?682679"><img src="images/posters/minivalbigfoots.jpg" class="event-posters" alt="ties spencer parker minival bigfoots tickets" /></a></div>
        </section>

和这个（css）：

    #events {
    margin: 0 auto;
    width: 80%;
    text-align: center;
    }

    .event-posters {
    max-width: 30%;
    margin: 0 auto;
    float:left;
    }

在我自定义预先存在的模板时，一些样式是预先编写的（即主样式3主要样式）。

如果您需要有关预先编写的CSS的更多信息，请告诉我。

任何帮助表示赞赏！

Answer 1

我认为你正在尝试这样的事情 - JSfiddle Demo

  #events {
    margin: 0 auto;
    width: 80%;
    text-align: center;
  }
  #events div {
    display: inline-block;
  }

<section id="events" class="main style3 primary">
  <div>
    <a href="http://www.residentadvisor.net/event.aspx?682679">
      <img src="http://lorempixel.com/output/city-q-c-250-150-2.jpg" class="event-posters" alt="ties spencer parker minival bigfoots tickets" />
    </a>
  </div>
  <div>
    <a href="http://www.residentadvisor.net/event.aspx?682679">
      <img src="http://lorempixel.com/output/city-q-c-250-150-2.jpg" class="event-posters" alt="ties spencer parker minival bigfoots tickets" />
    </a>
  </div>
  <div>
    <a href="http://www.residentadvisor.net/event.aspx?682679">
      <img src="http://lorempixel.com/output/city-q-c-250-150-2.jpg" class="event-posters" alt="ties spencer parker minival bigfoots tickets" />
    </a>
  </div>
</section>

通过响应式堆叠使图像均匀分布

1 个答案: