Question

当屏幕分辨率达到平板电脑尺寸时，除最后两个外，我的图像排成两排 - 它们堆叠在一起。知道如何让它们像其他人一样排成一列吗？

我整个上午一直在努力，似乎无法做到正确。我确定这很简单。

.meettheteam { text-align: center; background-color: #f2707e; }
  .banner { text-align: center; max-width: 100%; height: auto; width: auto; padding-top: 2%; }
  
  .mtt { display: inline-block; color: #ffffff; text-align: center; max-width 100%; height: auto; width: auto; }
  
  .mtt2 { display: inline-block; color: #ffffff; text-align: center; max-width: 100%; height: auto; width: auto; }
  
  .mtt3 { display: inline-block; color: #ffffff; text-align: center; max-width: 100%; height: auto; width: auto; }
  
  #one { padding-right: 20px; }
  #two { padding-right: 20px; }
  #three { padding-right: 20px; }
  #four { padding-right: 20px; }

<div class="meettheteam">
  <div class="banner">
    <img src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/576445849f74567f15556571/1466189188385/STL-Meettheteam-Mobile.png" alt="meet the team banner">
  </div>

  <div class="mtt">
    <img id="one" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/576436f4579fb3558d9753f3/1466185460557/STL-Team-Desktop.png" alt="Meet the Team Images">
    <figcaption>Name</figcaption> 
    <img id="two" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/576436f4579fb3558d9753f3/1466185460557/STL-Team-Desktop.png" alt="Meet the Team Images">
      <figcaption>Name</figcaption>
</div>

  <div class="mtt2">
    <img id="three"
 src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/576436f4579fb3558d9753f3/1466185460557/STL-Team-Desktop.png" alt="Meet the Team Images">
      <figcaption>Name</figcaption>
    <img id="four" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/576436f4579fb3558d9753f3/1466185460557/STL-Team-Desktop.png" alt="Meet the Team Images">
      <figcaption>Name</figcaption>
  </div>
  
  <div class="mtt3">
    <img id="five" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/576436f4579fb3558d9753f3/1466185460557/STL-Team-Desktop.png" alt="Meet the Team Images">
    <figcaption>Name</figcaption>
    <img id="six" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/576436f4579fb3558d9753f3/1466185460557/STL-Team-Desktop.png" alt="Meet the Team Images">
    <figcaption>Name</figcaption>
  </div>
</div>

Answer 1

我喜欢在这些情况下使用flexbox（请参阅下面的代码段）：

.meettheteam { text-align: center; background-color: #f2707e; }
  .banner { text-align: center; max-width: 100%; height: auto; width: auto; padding-top: 2%; }
  
  .mtt, .mtt2, .mtt3 { display: flex; justify-content: space-between; color: #ffffff; text-align: center; max-width 100%; height: auto; width: auto; }

<div class="meettheteam">
  <div class="banner">
    <img src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/576445849f74567f15556571/1466189188385/STL-Meettheteam-Mobile.png" alt="meet the team banner">
  </div>

  <div class="mtt">
    <div>
      <img id="one" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/576436f4579fb3558d9753f3/1466185460557/STL-Team-Desktop.png" alt="Meet the Team Images">
      <figcaption>Name</figcaption>
    </div>
    <div>
      <img id="two" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/576436f4579fb3558d9753f3/1466185460557/STL-Team-Desktop.png" alt="Meet the Team Images">
      <figcaption>Name</figcaption>
    </div>
</div>

  <div class="mtt2">
    <div>
      <img id="three"
 src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/576436f4579fb3558d9753f3/1466185460557/STL-Team-Desktop.png" alt="Meet the Team Images">
      <figcaption>Name</figcaption>
    </div>
    <div>
      <img id="four" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/576436f4579fb3558d9753f3/1466185460557/STL-Team-Desktop.png" alt="Meet the Team Images">
      <figcaption>Name</figcaption>
    </div>
  </div>
  
  <div class="mtt3">
    <div>
      <img id="five" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/576436f4579fb3558d9753f3/1466185460557/STL-Team-Desktop.png" alt="Meet the Team Images">
      <figcaption>Name</figcaption>
    </div>
    <div>
      <img id="six" src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/576436f4579fb3558d9753f3/1466185460557/STL-Team-Desktop.png" alt="Meet the Team Images">
      <figcaption>Name</figcaption>
    </div>
  </div>
</div>

编辑：

正如其他人所说，你对最后的图片没有相同的规则，所以它更可能是问题的根源...... 顺便问一下，你为什么还要再次重复相同的规则呢？例如，你有这个：

.mtt { display: flex; color: #ffffff; text-align: center; max-width 100%; height: auto; width: auto; }

.mtt2 { display: flex; color: #ffffff; text-align: center; max-width: 100%; height: auto; width: auto; }

.mtt3 { display: flex; color: #ffffff; text-align: center; max-width: 100%; height: auto; width: auto; }

与此相同：

.mtt, .mtt2, .mtt3 { display: flex; color: #ffffff; text-align: center; max-width 100%; height: auto; width: auto; }

或可以定位的图像：

div:not(.banner) img { padding-right: 20px; }

当调整大小时，如何使最后两行的最后两行在最后一行上排成两行？

1 个答案: