脑子里一片空白。我正在尝试使用 display: flex; 将我的图片放在 h3 和段落下，并在 3 张图片之间留有空格，但我很难让它工作。
我期待有人帮助我。代码如下。忽略添加到 css 中的所有 border:，我只是将它们放入有时可以帮助我了解所有内容的位置。
谢谢卢克。
.join {
position: relative;
display: flex;
width: 100%;
top: 37rem;
background: rgb(18,28,38);
height: 400px;
color: white;
letter-spacing: 1px;
border: 1px solid green;
}
.join-wording h3{
margin-bottom: 10px;
}
.join-wording{
height: 50px;
border: 1px solid red;
margin: 20px 0 0 10px;
}
.clickLink{
color: cornflowerblue;
}
.join-image{
border: 2px solid pink;
}
.join-image img{
border-radius: 5px;
margin: 5px;
}<div class="join"> <!--rgb(18,28,38)-->
<div class="join-wording">
<h3>Meditaite with friends</h3>
<p>Bring a friend along and you both get a free session. <a class="clickLink" href="/">Click here to register a friend</a>.</p>
</div>
<div class='join-image'>
<img class="group" src="./images/dylan-gillis-YJdCZba0TYE-unsplash (1).jpg" alt="Group Yoga" width="300px">
<br>
<img class="group" src="./images/bruce-mars-gJtDg6WfMlQ-unsplash.jpg" alt="freinds yoga" width="300px">
<br>
<img class="group" src="./images/kaylee-garrett-GaprWyIw66o-unsplash.jpg" alt="beahc yoga" width="300px">
</div>
</div>答案 0 :(得分：1)
我几乎在每个容器上都使用了 flexbox 来实现您想要的效果。
我改变了：
.image-wrapper > img{
height: 150px;
width: auto;
}
到
.image-wrapper > img{
max-width: 100%;
object-fit: cover;
}
.join {
position: absolute;
display: flex;
width: 100%;
top: 37rem;
background: rgb(18,28,38);
height: 400px;
color: white;
letter-spacing: 1px;
border: 1px solid green;
display: flex;
flex-direction: column;
}
.join-wording {
height: 50px;
border: 1px solid red;
margin: 20px 20px 0 20px;
min-height: 50px; /* min-height allows growth */
display: flex;
flex-direction: column;
flex: 0 1 80px;
}
.join-wording > h3{
display: block;
margin-bottom: 0;
}
.join-wording > p{
display: block;
margin-top: 0;
}
.clickLink{
color: cornflowerblue;
}
.join-image{
margin: 20px 20px 0 20px;
border: 2px solid pink;
display: flex;
justify-content: space-between;
flex: 1 1 auto;
}
.image-wrapper{
margin:auto;
}
.image-wrapper > img{
max-width: 100%;
object-fit: cover;
}<div class="join"> <!--rgb(18,28,38)-->
<div class="join-wording">
<h3>Meditaite with friends</h3>
<p>Bring a friend along and you both get a free session. <a class="clickLink" href="/">Click here to register a friend</a>.</p>
</div>
<div class='join-image'>
<div class="image-wrapper">
<img class="group" src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall.jpg" alt="Group Yoga" width="300px">
</div>
<div class="image-wrapper">
<img class="group" src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall.jpg" alt="freinds yoga" width="300px">
</div>
<div class="image-wrapper">
<img class="group" src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall.jpg" alt="beahc yoga" width="300px">
</div>
</div>
</div>答案 1 :(得分：1)
这里是您的问题的解决方案 ps 一些指导您的建议：检查 css 我没有更改 html 中的任何内容，因为它是您自己的工作。我只是修复了一些东西，现在您可以看到不同之处。还有这个应该按照你想要的方式工作：
.join {
display: flex;
flex-direction: column;
width: 100%;
top: 37rem;
background: rgb(18,28,38);
height: 900px;/* i change this to 900px because your images heigt is height than the width of the main div*/
color: white;
letter-spacing: 1px;
border: 1px solid green;
align-items: center;
justify-content: space-around;/* I add this two properties[align-items,justify-content]just to make your page more beautiful you can delet them if you want */
}
.join-wording h3{
margin-bottom: 10px;
}
.join-wording{
height: 50px;
border: 1px solid red;
margin: 20px 20px 0 10px;
}
.clickLink {
color: cornflowerblue;
}
.join-image{
border: 2px solid pink;
}
.join-image img{
border-radius: 5px;
margin: 30px; /* your code didn't work because the margin bottom of the above div was 0px and the margin of images was only 5px*/
}
img {
margin: 5px;/* add some spaces between each image*/
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="join"> <!--rgb(18,28,38)-->
<div class="join-wording">
<h3>Meditaite with friends</h3>
<p>Bring a friend along and you both get a free session. <a class="clickLink" href="/">Click here to register a friend</a>.</p>
</div>
<div class='join-image'>
<img class="group" src="Dr.jpg" alt="Group Yoga" width="300px">
<br>
<img class="group" src="Dr.jpg" alt="freinds yoga" width="300px">
<br>
<img class="group" src="Dr.jpg" alt="beahc yoga" width="300px">
</div>
</div>
</body>
</html>答案 2 :(得分：0)
我不确定这是否是您想要的，但是要在标题和段落下内嵌图像，您需要将 display: flex 放在图像的父容器上：
.join {
width: 100%;
background: rgb(18,28,38);
color: white;
letter-spacing: 1px;
border: 1px solid green;
}
.join-wording h3{
margin-bottom: 10px;
}
.join-wording{
border: 1px solid red;
margin: 20px 10px;
}
.clickLink{
color: cornflowerblue;
}
.join-image{
display: flex;
align-items: center;
}
.join-image img{
border-radius: 5px;
margin: 5px;
/* calculates 1/3 of the space minus 2 times the border */
width: calc(33.33% - 10px);
}<div class="join"> <!--rgb(18,28,38)-->
<div class="join-wording">
<h3>Meditaite with friends</h3>
<p>Bring a friend along and you both get a free session. <a class="clickLink" href="/">Click here to register a friend</a>.</p>
</div>
<div class='join-image'>
<img class="group" src="https://images.unsplash.com/flagged/photo-1573556291531-a5d957d7e4e7?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fHlvZ2ElMjBncm91cHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="beahc yoga">
<img class="group" src="https://images.unsplash.com/photo-1573462239448-06b5cde9df64?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjJ8fHlvZ2ElMjBncm91cHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="Group Yoga">
<img class="group" src="https://images.unsplash.com/photo-1554977932-040e7f5853b3?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fHlvZ2ElMjBncm91cHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="freinds yoga">
</div>
</div>