Question

我有几张图像排成一列，这部分工作正常。但是，我想在每个图像下面放置文本，但是当我尝试这样做时（通过使用'br'或通过创建自己的'div'），图像会创建自己的行并将其他图像向下推。我明白为什么会这样做，但我发现很难解决这个问题。这是我的代码：

<div class="container-team">
    <div class="team">
        <h2>Our team</h2>
        <div class="team-members">
            <img src="test1.png">
            <img src="test1.png">
            <img src="test1.png">
            <img src="test1.png">
            <img src="test1.png">
            <img src="test1.png">
        </div>
    </div>
</div>

.container-team {
    background-color: #eee;
    display:block;
    overflow:auto;
    width: 100%;
}

.team {
    margin:0 auto; 
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
}

.team h2 {
    color: #0E8DBD;
    padding-top: 40px;
    padding-left: 5%;
    padding-bottom: 100px;
    font-size: 32px;
    text-transform: uppercase;
}

.team-members {
    background: #eee;
    width: 100%;
    display:block;
    overflow:auto;
    margin: 0 auto;
    text-align: center;
}

.team-members img {
    width: 180px;
    height: 180px;
    margin: 20px;
}

这里还有2张图片，以便更清楚地了解正在发生的事情：

This is what it currently looks like

This is what happens when I give an image its own 'div'

感谢任何帮助，谢谢您的时间。

Answer 1

试试这个：

<div class="container-team">
<div class="team">
    <h2>Our team</h2>
    <div class="team-members">
        <div>
            <img src="test1.png">
            <img src="test1.png">
            <img src="test1.png">
            <img src="test1.png">
            <img src="test1.png">
            <img src="test1.png">
        </div>
        <p>Your Text here</p>
    </div>
</div>

您必须格式化文本以使其与每个图像对齐，但它应该将其放到下一行。

Answer 2

默认情况下，div元素的显示属性为block。尝试这样的事情：

<div class="team-member">
  <img src="image.png">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

.team-member {
  display: inline-block;
  width: 180px;
}

看看这个工作示例。希望这是您想要实现的结果：https://fiddle.jshell.net/ogocx9s5/

将文本放在图像下而不移动图像？

2 个答案: