如何将文本完全放在图像下方
我有一个简短的问题，当我试图在这个例子中设计我的图像样式时，文本不在它自己的行中吗？我如何在不添加很多br的情况下做到这一点，有没有更简单的方法？我不想编辑图像样式(这就是这个问题的全部要点)
JS小提琴链接：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：.imgContainer
{
float: left;
}回答 2
Stack Overflow用户
发布于 2015-05-23 06:58:14
在您的小提琴中，只需添加以下内容即可解决您的问题：
.image123 { overflow: auto }也就是说，我会稍微重构一下，使用像flexbox这样的东西。我冒然修改了一下你的小提琴，以反映更好的语义和更有条理的风格。
小提琴：https://jsfiddle.net/3vy8p6fx/3/
以下材料是对OP提供的原始代码的响应。
这是因为图像绝对定位于视区，因此从布局流中移除，与段落重叠。此外，图像元素是自关闭的，因此不需要</img>。
此外，段落已经是块元素了。所以你的内联样式是不需要的。去掉所有的样式，你就会得到你想要的效果。
<!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>Stack Overflow用户
发布于 2015-05-23 07:44:55
只需更改您的
.imgContainer
{
float: left;
}至
.imgContainer
{
display: inline-block;
}演示： https://jsfiddle.net/3vy8p6fx/2/
注意：
我还更改了一些html语法，例如：
我使用<img ... />而不是<img ...></img>
break tags <br> to <br/> ...etc。请看我的演示！
https://stackoverflow.com/questions/30407010
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号