如何使用响应式文本和图像创建 3 列？ [关闭]答案

【问题标题】：How do I create 3 columns with responsive text and images? [closed]如何使用响应式文本和图像创建 3 列？ [关闭]
【发布时间】：2020-09-19 04:10:58
【问题描述】：

HTML/CSS 初学者在这里...我有一张图片，其正下方有文字。我需要将 3 张图片与下面的文字并排放置（参见下面的示例）。我希望每列周围和之间都有相等的空间。 Image 1 需要与 Text1 垂直对齐，Image2 与 Text2 垂直对齐，Image3 与 Text3 垂直对齐。

Image1 Image2 Image3

Text1  Text2 Text3

当在较小的屏幕上显示时，我还需要将 3 列降到彼此下方。

Image1

Text1

Image2

Text2

Image3

Text3

我一直在使用 Flexbox，但只能在全尺寸屏幕上显示它。当我为移动设备缩小屏幕时，图像重叠并且不再与下面的文本对齐。 3 段文字保持其位置，但图像似乎不想配合。此外，图像和文本不会下拉到下一行。我知道...我可能在这里做错了什么！

如果有人可以为此提供 HTML 和 CSS 代码，我想我可以找出哪里出错了。如果您可以为您的代码添加一个无用的解释......但任何帮助措施都将受到赞赏。

【问题讨论】：

欢迎来到 Stack Overflow！请访问help center、tour 以查看内容和How to Ask。做一些研究，搜索关于 SO 的相关主题；如果您遇到困难，请发布您尝试的minimal reproducible example，注意输入和预期输出，最好在Stacksnippet

标签： html css flexbox media-queries multiple-columns

【解决方案1】：

首先创建一个 div（这里是容器），其中将显示 3 列。使用 flex 方向行和 flex-wrap = wrap 设置容器显示 flex 的样式。 Wrap 很重要，因为当屏幕很小时，它会像移动视图一样一一显示。否则它会与其他重叠并尝试一起显示 3 列。

第二次你在这里创建三个 div 框，每个框都包含图像标题和 p 标签。将 box flex 和方向的样式设置为 column，因为它在另一个下显示。对齐并对齐所有项目中心

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>



    <style>
.container{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    
}
img{
    width:100%;
    height:auto;
}
.box{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width:25rem;
    min-width:18rem;
    margin: 10px;
    text-align: center;

}
    
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <img src="https://images.pexels.com/photos/36753/flower-purple-lical-blosso.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
            <h1>hello box1</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique molestias hic velit, ipsum facere nemo minus distinctio est quidem neque.</p>
        </div>
        <div class="box">
            <img src="https://images.pexels.com/photos/36753/flower-purple-lical-blosso.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
            <h1>box2</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique molestias hic velit, ipsum facere nemo minus distinctio est quidem neque.</p>
        </div>
        <div class="box">
            <img src="https://images.pexels.com/photos/36753/flower-purple-lical-blosso.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
            <h1>box3</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique molestias hic velit, ipsum facere nemo minus distinctio est quidem neque.</p>
        </div>
      </div>
</body>
</html>

【讨论】：