Question

因此，我编写此代码是为了响应，我希望每张图片都水平放置，并在较小的屏幕中垂直放置。我唯一的问题是，在较大的屏幕上，我希望将img居中放置，但似乎没有代码起作用。我尝试了Stack用户的一些解决方案，但只能让它完全向左或向右移动，而不能居中。

感谢您的帮助。

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
  max-width: 200px;
  display: block;
  margin: 15px auto;
}


/* Clearfix (clear floats) */

.row::after {
  content: "";
  clear: both;
  display: table;
}


/* Responsive layout - makes the three columns stack on top of each other 
    instead of next to each other */

@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

<h2>Responsive "Side-by-Side" Images</h2>
<p>How to create side-by-side images with the CSS float property. On screens that are 500px wide or less, the images will stack on top of each other instead of next to each other:</p>
<p>Resize the browser window to see the effect.</p>

<div class="row">
  <div class="column">
    <img src="http://zoeaa.com/public/admin/starbucksoffer.png" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="http://zoeaa.com/public/admin/mysteryoffers.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="http://zoeaa.com/public/admin/targetoffers.png" alt="Mountains" style="width:100%">
  </div>
  <div class="column">
    <img src="http://zoeaa.com/public/admin/starbucksoffer.png" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="http://zoeaa.com/public/admin/mysteryoffers.jpg" alt="Forest" style="width:100%">
  </div>
</div>

Answer 1

最简单的方法是使用flexbox。它具有天生的响应能力，并保持文档流完整无缺。

* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

.column {
  width: 33.33%;
  padding: 5px;
  max-width: 200px;
  display: block;
  margin: 15px auto;
}


/* Responsive layout - makes the three columns stack on top of each other 
    instead of next to each other */

@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

<h2>Responsive "Side-by-Side" Images</h2>
<p>How to create side-by-side images with the CSS float property. On screens that are 500px wide or less, the images will stack on top of each other instead of next to each other:</p>
<p>Resize the browser window to see the effect.</p>

<div class="row">
  <div class="column">
    <img src="http://zoeaa.com/public/admin/starbucksoffer.png" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="http://zoeaa.com/public/admin/mysteryoffers.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="http://zoeaa.com/public/admin/targetoffers.png" alt="Mountains" style="width:100%">
  </div>
  <div class="column">
    <img src="http://zoeaa.com/public/admin/starbucksoffer.png" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="http://zoeaa.com/public/admin/mysteryoffers.jpg" alt="Forest" style="width:100%">
  </div>
</div>

尝试将img居中，但没有常见的修复方法

1 个答案: