如何在 div 内平衡我的图像（和文本）并且两者都必须保持响应

Question

我是 HTML 和 CSS 的超级初学者。它实际上是对齐和平衡的，直到我在每三个 div 中放置文本并且照片变成这样，即使我使用相同的宽度和高度也不平衡：

这些是代码：

#wrapper{
 display:flex;
 width: 100%;
 justify-content: space-around;
 }
 
 .party{
 display:inline-flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-around;
 padding: 2%;
 
 }
 
 .party img{
 border: solid black 2px;
 padding: 0.3%;
 margin: 2%;
 max-width: 100%;
 max-height: 100%;
 }
 input[type = button] {
 background-color: black;
 padding: 10px 20px;
 color: white;
 margin: 2px 1px;
 cursor: pointer;
 }

<div id="wrapper">
<div class = "party">
<img src = "Images/birthday_1.jpg">
<h3 style = "font-size: 2vw;">Party Events</h3>
<p style = "font-size: 1.5vw;"> Want flower decoration for your birthday, ceremonies, baby showers and any party events? Consult to our florist now!</p>
<input type = "button" value = " Shop Now "/>
</div>
<div class ="party">
<img src = "Images/wedding_1.jpg">
<h3 style = "font-size: 2vw;"> Wedding Events </h3>
<p style = "font-size: 1.5vw;">We offer free consultation for a bride-to-be. Call our store to make an appointment on <b>+64 85459 3943</b></p>
<input type = "button" value = " Shop Now "/>
</div>
<div class = "party">
<img src = "Images/sympathy.jpg">
<h3 style = "font-size: 2vw;">Sympathy</h3>
<center><p style = "font-size: 1.5vw;"> Fresh flowers that express heartfelt thoughts and sincere condolences. Talk to our dedicated team by phone or come in to meet with our flourist in a private consultation.</p></center>
<input type = "button" value = " Shop Now "/>
</div>
</div>

这是我的理想结果：

** 我应该怎么办？有什么建议吗？**

Answer 1

#wrapper{
    display:flex;
    width: 100%;
    justify-content: space-around;
}
.party{
    display:inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 2%;
    width: 33.33%;
}
.party-image-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    border: solid black 2px;
    padding: 0.3%;
    padding-top: 100%;
    margin: 2%;
    max-width: 100%;
    max-height: 100%;
}
.party img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
input[type = button] {
    background-color: black;
    padding: 10px 20px;
    color: white;
    margin: 2px 1px;
    cursor: pointer;
}

<div id="wrapper">
    <div class = "party">
        <div class="party-image-wrapper">
            <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg">
        </div>
        <h3 style = "font-size: 2vw;">Party Events</h3>
        <p style = "font-size: 1.5vw;"> Want flower decoration for your birthday, ceremonies, baby showers and any party events? Consult to our florist now!</p>
        <input type = "button" value = " Shop Now "/>
    </div>
    <div class ="party">
        <div class="party-image-wrapper">
            <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Cat_November_2010-1a.jpg/1200px-Cat_November_2010-1a.jpg">
        </div>
        <h3 style = "font-size: 2vw;"> Wedding Events </h3>
        <p style = "font-size: 1.5vw;">We offer free consultation for a bride-to-be. Call our store to make an appointment on <b>+64 85459 3943</b></p>
        <input type = "button" value = " Shop Now "/>
    </div>
    <div class = "party">
        <div class="party-image-wrapper">
            <img src = "https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=49ed3252c0b2ffb49cf8b508892e452d">
        </div>
        <h3 style = "font-size: 2vw;">Sympathy</h3>
        <center>
            <p style = "font-size: 1.5vw;"> Fresh flowers that express heartfelt thoughts and sincere condolences. Talk to our dedicated team by phone or come in to meet with our flourist in a private consultation.</p>
        </center>
        <input type = "button" value = " Shop Now "/>
    </div>
</div>

当使用 flex 将元素放在同一行时，默认行为是让元素适应其内容的宽度。要解决这个问题，您可以简单地设置每个元素的宽度，我选择了 33.33%，因为我们有 3 个元素，所以 100 / 3 = 33.33.

对于图片，有一个技巧可以将它们锁定在一个响应式正方形中，无论图片大小或比例如何，您需要将图片放入容器中，将容器的高度设置为 0 并且 padding-top（或底部）到 100%，因为百分比是基于它的宽度，所以它会使容器成为一个完美的正方形。

一旦你有了那个方块，你就可以使用 position: absolute;在图像本身上相对于容器定位它，然后使用 object-fit: cover，它基本上告诉浏览器总是用给定的元素填充容器。它有点复杂，但我希望它是有道理的，你说你还是一个初学者所以如果现在不是很清楚不要担心，你最终会明白的。如果您还有其他问题，请在评论中提出

Answer 2

首先，盒子调整大小的原因是它们是 flexbox 布局的一部分，默认情况下它们的内容 grow/shrink。有多种方法可以调整它，但在您的情况下，听起来您希望所有 3 个框都具有相同的宽度。

如果您知道您只有 3 个 party 框，那么不要依赖 flexbox 的宽度，只需这样做：

.party {
    display:inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 2%;
    width: 33.33%;
    box-sizing: border-box;
}

如果您希望保留 flexbox，您可以使用 flex-basis: 33.33% 而不是 width: 33.33%。

如何在 div 内平衡我的图像（和文本）并且两者都必须保持响应

How to balance my image (and text) inside div and both must remains responsive

html

css

google-web-designer