html - 文本不留在 div 中

Question

我有一些文本 block 甚至没有保留在页面 div 的父级中。我试图在图像上放置一段文本，但它的作用就好像它根本没有附加到图像上一样。将图像设置为 position: absolute; 和文本position:relative；似乎打破了整个布局。

as seen in this image.

HTML

      <section id="productInfo">
        <section class="productDescLargeLeft">
            <img src="images/combat_image1.jpg" alt="combat image" width="410" height="300">
            <p><span>Experience the combat of an MMO, with an oldschool Final Fantasy twist.</span></p>
        </section><!--end productDesc1-->
        <section class="productDescLargeRight">
            <img src="images/craft_image1.jpg" alt="craft image" width="410" height="300">
            <p><span>Use life skills to gather raw materials and create a variety of items...</span></p>
        </section><!--end productDesc4-->
    </section><!--end productInfo-->

CSS

.productDescLargeLeft {
    float:left;
    width: 410px;
}

.productDescLargeLeft p {
    background: none;
    bottom: 120px;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    font-size: 16px;
}

.productDescLargeRight {
    float:right;
    width: 410px;
}

.productDescLargeRight p {
    background: none;
    bottom: 120px;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    font-size: 16px;
}

Answer 1

在您的示例中，您缺少 position: absolute 尽管正如您所说，这导致布局很奇怪，在这个 fiddle 中测试后 https://jsfiddle.net/0tcjpbkc/1/我发现只需在 P 元素上将最大宽度设置为以匹配图像即可:

.productDescLargeRight p {
    background: none;
    bottom: 120px;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    font-size: 16px;
    max-width: 410px;
    position: absolute;
}

然后文本愉快地位于图像容器中，就像在 fiddle 中一样，您还需要对其他图像容器执行相同操作 .productDescLargeLeft p