css - 是什么造成了这些巨大的差距？

Question

我正在尝试在此页面上显示查询中的多个元素。我正在尝试制作它们，使 6 张图像排在一条线上且间隔均匀。然而，似乎无论我如何更改 css，我仍然会在某些地方出现巨大的差距。

这是我用来创建这个部分的代码:

    <div class="container2">
    <div class="category"><h2>All Items</h2></div>
        <div class="display">
          <?php do { ?>
            <ul>
                <li><a href="details.php?recordID=<?php echo $row_Master['Master_ID']; ?>"><img class="thumb" src="img/<?php echo $row_Master['Img']; ?>"/>
                <br />
                <?php echo $row_Master['Name']; ?></a></li>
            </ul>
            <?php } while ($row_Master = mysqli_fetch_assoc($Master)); ?>
          <!-- end .display --></div>
          <?php
        mysqli_free_result($Master);
        ?>
<!-- end .container2 --></div>

以及与之关联的 CSS:

.container2 {
    margin:0 auto;
    text-align: center;
    width:95%;
    background-color:#FFFFFF;
 }

.display{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    overflow:hidden;
}

.display ul li {
    float:left;
    max-width:15.67%;
    margin: 0 0 8% 1%;}

.display ul{
    list-style:none;
    }

img.thumb {
    border:0;
    max-height:150px;
    min-width:16.67%;
    vertical-align:middle;
    padding:3px;}

谁能帮我消除这些巨大的差距，plz？

Answer 1

Flexbox 的胜利。

使用此配置，您可以获得六个跨行换行。 flex 容器得到:

display: flex;
flex-wrap: wrap;

flex 元素得到:

flex: 0 0 16.666%;

我在 CSS 中添加了几条注释来解释我在这里所做的事情。这种方法需要一些练习，但一旦你掌握了它，你就再也不会使用 float 进行布局了。

这里有一个很好的资源，很好地解释了 flexbox 方法:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

* { box-sizing: border-box; }

.display {
  border: 2px solid red; /* just for demo visibility */
}

.display ul {
  /* ul reset */
  list-style: none;
  padding: 0;
  margin: 0;
  
  /* flexbox layout - flex container config */
  display: flex;
  flex-wrap: wrap;
}

.display ul li {
  border: 2px solid dodgerblue; /* just for demo visibility */
  padding: 10px; /* use padding to create spacing between items, remove the borders to get the final look */
  
  /* flex item config */
  flex: 0 0 16.66%; /* 100 divided by 6 is 16.666... */
}

.display ul li span {
  display: block;
  text-align: center;
}

.display ul li img {
  max-width: 100%;
  height: auto;
}

<div class="container2">
  <div class="category">
    <h2>All Items</h2>
  </div>
  <div class="display">
    <ul>
      <li>
        <a href="x">
          <img class="thumb" src="https://picsum.photos/120" />
          <span class="name">Thing 1</span>
        </a>
      </li>
      <li>
        <a href="x">
          <img class="thumb" src="https://picsum.photos/120" />
          <span class="name">Thing 2</span>
        </a>
      </li>
      <li>
        <a href="x">
          <img class="thumb" src="https://picsum.photos/120" />
          <span class="name">Thing 3</span>
        </a>
      </li>
      <li>
        <a href="x">
          <img class="thumb" src="https://picsum.photos/120" />
          <span class="name">Thing 4</span>
        </a>
      </li>
      <li>
        <a href="x">
          <img class="thumb" src="https://picsum.photos/120" />
          <span class="name">Thing 5</span>
        </a>
      </li>
      <li>
        <a href="x">
          <img class="thumb" src="https://picsum.photos/120" />
          <span class="name">Thing 6</span>
        </a>
      </li>
      <li>
        <a href="x">
          <img class="thumb" src="https://picsum.photos/120" />
          <span class="name">Thing 7</span>
        </a>
      </li>
      <li>
        <a href="x">
          <img class="thumb" src="https://picsum.photos/120" />
          <span class="name">Thing 8</span>
        </a>
      </li>
      <li>
        <a href="x">
          <img class="thumb" src="https://picsum.photos/120" />
          <span class="name">Thing 9</span>
        </a>
      </li>
      <li>
        <a href="x">
          <img class="thumb" src="https://picsum.photos/120" />
          <span class="name">Thing 10</span>
        </a>
      </li>
    </ul>
  </div>
</div>