我有一个快速的问题，当我尝试在这个例子中设置我的图像样式时，文本没有在自己的行中？如果不添加许多 br，我怎么能做到这一点，有没有更简单的方法来做到这一点？我不想编辑图像样式(这就是这个问题的重点)
JS Fiddle 链接:https://jsfiddle.net/3vy8p6fx/
如何让“员工”成为自己的台词？
<strong>History</strong><br />
<br />
<strong>Mission</strong><br />
<br />
<strong>Leadership</strong>
<div class="image123">
<div class="imgContainer">
<a href="http://nssc-test.berkeley.edu/leadership/vujic/">
<img src="http://nssc-test.berkeley.edu/wp-content/uploads/2015/03/Vujic-150x150.jpg">
</img>
</a>
<p align="center">
<a href="http://nssc-test.berkeley.edu/leadership/">Jasmina Vujic</a>
<br>Principal Investigator
</p>
</div>
<div class="imgContainer">
<a href="http://www.nuc.berkeley.edu/karl-van-bibber">
<img style="Padding-left: 5%;" src="http://nssc-test.berkeley.edu/wp-content/uploads/2015/03/KarlVan-Resized-150x150.jpg">
</img>
</a>
<p align="center">
<a href="http://nssc-test.berkeley.edu/leadership/">Karl Van Bibber</a>
<br>Executive Director
</p>
</div>
<div class="imgContainer">
<a href="http://nssc-test.berkeley.edu/leadership/vujic/">
<img style="Padding-left: 5%;" src="http://nssc-test.berkeley.edu/wp-content/uploads/2015/03/Bradley_M_Sherrill-150x150.png">
</img>
</a>
<p align="center">
<a href="http://nssc-test.berkeley.edu/leadership/">Bradley Sherill</a>
<br>Deputy Exec Director
</p>
</div>
<div class="imgContainer">
<a href="http://nssc-test.berkeley.edu/leadership/vujic/">
<img style="Padding-left: 5%;" src="http://nssc-test.berkeley.edu/wp-content/uploads/2015/03/Vetter-150x150.jpg">
</img>
</a>
<p align="center">
<a href="http://nssc-test.berkeley.edu/leadership/">Kai Vetter</a>
<br>NNSA Liaison
</p>
</div>
<div class="imgContainer">
<a href="http://nssc-test.berkeley.edu/leadership/vujic/">
<img style="Padding-left: 5%;" src="http://npwg.berkeley.edu/wp-content/uploads/2014/05/Leadership-Bethany-Goldblum.png">
</img>
</a>
<p align="center">
<a href="http://nssc-test.berkeley.edu/leadership/">Bethany Goldblum</a>
<br>Associate Director
</p>
</div>
</div>
<br>
<b>Staff:</b>
CSS: .img容器
{
float: left;
}
最佳答案
在您的 fiddle 中，只需添加以下内容即可解决您的问题:
.image123 { overflow: auto }
话虽这么说，我会稍微重构一下以使用 flexbox 之类的东西。我冒昧地修改了你的 fiddle ，以反射(reflect)更好的语义和更有条理的样式。
fiddle :https://jsfiddle.net/3vy8p6fx/3/
以下 Material 是对 OP 提供的原始代码的回应。
这是因为图像绝对定位于视口(viewport)，因此从布局流中移除，与段落重叠。此外，图像元素是自闭合的，因此 </img>不需要。
此外，段落已经是 block 元素。所以不需要你的内联样式。删除所有 样式，您将获得想要的效果。
<!DOCTYPE html>
<head></head>
<body>
<img src="w3css.gif" />
<p>This is a heading.</p>
</body>
</html>
如果您必须将图像绝对定位在文档的顶部，您可以给出 <body>本身有一些额外的填充以进一步向下插入内容(在本例中为 <p>):
<!DOCTYPE html>
<head>
<style>
body {
padding-top: 150px;
}
img {
top: 0; left: 0;
position: absolute;
width: 100px; height: 140px;
}
</style>
</head>
<body>
<img src="w3css.gif" />
<p>This is a heading.</p>
</body>
</html>
关于html - 如何将文字完全放在图片下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30407010/