align-items-start 和 justify-content-between 不使用 flexbox答案

【问题标题】：align-items-start and justify-content-between without using flexboxalign-items-start 和 justify-content-between 不使用 flexbox
【发布时间】：2020-12-25 04:57:46
【问题描述】：

我有以下 html 代码，我想要做的是对齐容器顶部的所有黑框并使整个容器内容响应，以便当图像不适合时窗口变小容器，它们向下移动并对齐自身，就像在整个容器之间对齐内容一样。我对中间图像有问题，因为它下面有 2 个段落，并且黑框比其他黑框高。我也很难让它响应。有人可以帮忙吗？

<html lang="el">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <section>
        <div class="container menu-images">
            <div class="menu-img-div">
                <a href="Publications.html">
                    <img src="https://i.imgur.com/2YdegoR_d.webp?maxwidth=760&fidelity=grand" class="menu-img" alt="Posts HPV">
                    <p>TEXT 1</p>
                </a>
            </div>
            <div class="menu-img-div"><a href="Videos.html">
                    <img src="https://i.imgur.com/2YdegoR_d.webp?maxwidth=760&fidelity=grand" class="menu-img" alt="videos HPV">
                    <p>TEXT 2</p>
                </a>
            </div>
            <div class="menu-img-div"><a href="Information.html">
                    <img src="https://i.imgur.com/2YdegoR_d.webp?maxwidth=760&fidelity=grand" class="menu-img" alt="Cheatsheet-Frame HPV">
                    <p>TEXT 3.1</p>
                    <p>TEXT 3.2</p>
                </a>
            </div>
            <div class="menu-img-div">
                <a href="Poster.html">
                    <img src="https://i.imgur.com/2YdegoR_d.webp?maxwidth=760&fidelity=grand" class="menu-img" alt="poster HPV">
                    <p>TEXT 4</p>
                </a>
            </div>
            <div class="menu-img-div">
                <a href="Questions.html">
                    <img src="https://i.imgur.com/2YdegoR_d.webp?maxwidth=760&fidelity=grand" class="menu-img" alt="Συχνές-ερωτήσεις HPV">
                    <p>TEXT 5</p>
                </a>
            </div>
        </div>
    </section>
</body>

</html>
Also here is my css

.menu-img-div {
    display: inline-block;
}
.menu-images {
    max-width: 1324px;
}

【问题讨论】：

标签： html bootstrap-4 responsive

【解决方案1】：

如果这是容器在桌面上的外观：

IMGUR

在移动设备上：

IMGUR

那你为什么不直接使用网格系统呢？ (https://getbootstrap.com/docs/5.0/layout/grid/) 这更容易：

<div class="container">
  <div class="row">
    <div class="col col-12 col-md-4">
      <p>Content</p>
    </div>
    <div class="col col-12 col-md-4">
      <p>Content</p>
    </div>
    <div class="col col-12 col-md-4">
      <p>Content</p>
    </div>
  </div>
</div>

【讨论】：

我有 5 个框而不是 3 个。在您的示例中，您使用的是列，但我想将所有 5 个框放在一行中以用于大屏幕，但引导程序中的最大列数为 12，所以我不能将 12 与 5 分开