如何使用响应式文本和图像创建 3 列？

Question

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

Image1 Image2 Image3

Text1  Text2 Text3

当在较小的屏幕上显示时，我还需要将 3 列放在另一列下方。

Image1

Text1

Image2

Text2

Image3

Text3

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

如果有人可以同时提供 HTML 和 CSS 代码，我想我可以找出我哪里出错了。如果您可以为您的代码添加一个非常有帮助的解释......但我们将不胜感激。

Answer 1

首先创建一个 div（此处为容器），其中将显示 3 列。使用 flex direction row 和 flex-wrap = wrap 设置容器显示 flex 的样式。环绕很重要，因为当屏幕变小时，它会像移动设备一样一个接一个地显示 view.Otherwise 它与其他重叠并尝试一起显示 3 列。

2nd 您在此处创建三个 div 框，每个框都包含图像标题和 p 标签。将 box flex 的样式和 direction 设置为 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>

如何使用响应式文本和图像创建 3 列？

How do I create 3 columns with responsive text and images?

html

css

multiple-columns

media-queries

flexbox