当前位置: 动力学知识库 > 问答 > 编程问答 >

html - How to place text completely below image

问题描述:

I have a quick question, when I try to style my image in this example, the text doesn't go down in its own line? How can I do that without adding many br's, is there a easier way to do this? I DO NOT WANT TO EDIT ON THE IMAGE STYLE (thats the whole point of this question)

JS Fiddle link: https://jsfiddle.net/3vy8p6fx/

How do I get the "Staff" to be its own line?

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

}

网友答案:

In your fiddle, simply adding the following will resolve your issue:

.image123 { overflow: auto }

That being said, I would refactor this a bit to use something like flexbox. I took the liberty to rework your fiddle a bit to reflect better semantics, and more organized styling.

Fiddle: https://jsfiddle.net/3vy8p6fx/3/


The following material was in response to the original code provided by the OP.

This is because the image is positioned absolutely to the viewport, thus removed from the flow of the layout, overlapping the paragraph. Also, the image element is self-closing, thus </img> is not needed.

Furthermore, paragraphs are already block elements. So your inline styles are not needed. Remove all styles, and you'll have the effect you're desiring.

<!DOCTYPE html>
    <head></head>
    <body>
        <img src="w3css.gif" />
        <p>This is a heading.</p>
    </body>
</html>

If you must have the image positioned absolutely, at the top of the document, you can give the <body> itself some additional padding to push the contents (the <p> in this case) down further:

<!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>
网友答案:

just change your

.imgContainer
        {
            float: left;
        }

TO

.imgContainer
        {
            display: inline-block;
        }

DEMO: https://jsfiddle.net/3vy8p6fx/2/

NOTICE:

i changed some html syntax too, like:

instead of <img ...></img> i do <img ... />

break tags <br> to <br/> ...etc. look to my DEMO!

分享给朋友:
您可能感兴趣的文章:
随机阅读: