Question

我有一个简单的问题，当我尝试在此示例中设置图像样式时，文本不会自行排列？如果不添加许多br，我怎么能这样做，有更简单的方法吗？我不想编辑图像样式（这就是这个问题的重点）

如何获得＆＃34;员工＆＃34;成为自己的路线？

  <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

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

static

话虽如此，我会稍微重构一下使用像flexbox这样的东西。我冒昧地重复你的小提琴，以反映更好的语义和更有组织的造型。

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

以下材料是对OP提供的原始代码的回应。

这是因为图像绝对定位于视口，因此从布局流中移除，与段落重叠。此外，图像元素是自动关闭的，因此不需要.image123 { overflow: auto }。

此外，段落已经块元素。所以不需要你的内联样式。删除所有样式，您将获得您想要的效果。

</img>

如果你必须绝对定位图像，在文档的顶部，你可以给<!DOCTYPE html> <head></head> <body> <img src="w3css.gif" /> <p>This is a heading.</p> </body> </html>本身一些额外的填充来推送内容（<body>在这种情况下）进一步下降：

<p>

Answer 2

只需更改

即可

.imgContainer
        {
            float: left;
        }

要

.imgContainer
        {
            display: inline-block;
        }

<强>样本： https://jsfiddle.net/3vy8p6fx/2/

注意：

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

而不是<img ...></img>我做<img ... />

将代码<br>分解为<br/> ...等等。看看我的DEMO！

如何将文本完全放在图像下方

2 个答案: