Question

问题在于，当我将图像添加到我的html页面时，我试图写一些东西继续我的工作，文本正在翻阅图像。我希望文本在图像下面。我不要＆＃ 39; t想要使用50＆＃34; br＆＃34;标签，以便我可以在它下面写。你知道问题是什么吗？

.poze {
    max-width: 100%;
    margin-top: 0.5em;
    margin-bottom: 1em;
    -webkit-box-shadow: rgba(0, 0, 0, 0.199219) 0px 0px 20px;
    background: white;
    border: 1px solid #CCC;
    border-bottom-left-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
    border-top-left-radius: 5px 5px;
    border-top-right-radius: 5px 5px;
    padding: 8px;
    "

}
.cerculet {
    display: block;
}
.cerculet:after {
    display: block;
    clear: both;
    content:' ';
}
.cerculet p {
    font-weight: bold;
}
.cerculet h2 {
    font-size: 120%;
    height: 145%;
    width: 1.6em;
    height: 1.6em;
    text-align: center;
    border-radius: 50%;
    background-color: black;
    color: white;
    white-space: nowrap;
    float: left;
    margin-right: 15px;
}

那就是CSS。现在我发布html代码：

<h2>
    <div class="cerculet">
        <h2>2 </h2>
        <p>
            <font size="5" face="Cambria">
                Gripa Spaniola (1918 - 1919):<br>
                A ucis intre 50 si 100 de milioane de oameni din intreaga<br>
                lume in mai putin de 2 ani
            </font>
        </p>
    </div>
</h2>
<br>
<img src="http://s6.postimg.org/6oyuxe1e9/Spanish_Flu.jpg" class="poze" style="position:absolute; left:150px;">
<div>
    <h1>
        As you can see,the text doesn't go under my image.How to fix this problem guys?
    </h1>
</div>

我希望你能理解代码。我的意思是，我使用了＃34; 4个空格缩进＆＃34;或者其他什么，我不知道这是否是发布代码的正确方法。如果我复制/粘贴所有代码，它就不会显示正确的... https://jsfiddle.net/9hw89uog/

Answer 1

从您的图片样式中删除position:absolute，它是您的案例中的内联样式

Answer 2

以下是一个解决方案：https://jsfiddle.net/73s1c4h1/2/

<div class="clearfix">
    <img src="https://images.nga.gov/images/bindo.jpg" class="poze"style="margin-left:150px;">
    <div>
        <h1 >
            Now the text should be clear of the image and positioned below it. 
        </h1>
    </div>
</div>

这涉及使用所有着名的＆＃34; clearfix＆＃34; CSS解决方案。您需要将图像和文本包装在div中，然后放置class =＆＃34; clearfix＆＃34;在那个div。 clearfix CSS在这里：https://css-tricks.com/snippets/css/clear-fix/ 它将强制div元素清除子元素。

Clearfix CSS：

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content:" ";
    clear: both;
    height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

第二种解决方案有点简单;只需设置 position：relative; 而不是绝对。 https://jsfiddle.net/73s1c4h1/1/

您可能还需要将左：150px 更改为 margin-left：150px

文字覆盖图像而不是图像

2 个答案: