如何将文字完全放在图片下方

Question

我有一个快速的问题，在此示例中，当我尝试对图像进行样式设置时，文本是否不排成一行？ 如何在不添加许多br的情况下做到这一点，有没有更简单的方法？ 我不想编辑图像样式（这就是问题的全部内容）

JS小提琴链接： https : //jsfiddle.net/3vy8p6fx/

如何使“ Staff”成为自己的品牌？

  <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;
}

Answer 1

在您的小提琴中，只需添加以下内容即可解决您的问题：

.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>

Answer 2

只是改变你的

.imgContainer
        {
            float: left;
        }

至

.imgContainer
        {
            display: inline-block;
        }

演示： https : //jsfiddle.net/3vy8p6fx/2/

注意：

我也更改了一些html语法，例如：

代替<img ...></img>我做了<img ... />

将标签<br>中断到<br/> ...等等。 期待我的演示！

如何将文字完全放在图片下方

问题描述

2 个解决方案

解决方案1
0 2015-05-22 22:58:14

解决方案2
0 2015-05-22 23:44:55

如何将文字完全放在图片下方

问题描述

2 个解决方案

解决方案1 0 2015-05-22 22:58:14

解决方案2 0 2015-05-22 23:44:55

解决方案1
0 2015-05-22 22:58:14

解决方案2
0 2015-05-22 23:44:55