Question

我有一些文本块，它们不会留在页面div的父级内部。我尝试在图像上放置一段文本，但它的作用就像它根本没有附加到图像上一样。将图像设置为位置：绝对; 和文字位置：相对;似乎打破了整个布局。

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

在你的例子中你缺少位置：绝对虽然正如你所说的那样导致布局变得奇怪，但是在这个小提琴中进行测试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;
}

然后文本愉快地位于图像容器内，因为在小提琴中，您还需要对另一个图像容器.productDescLargeLeft p

执行相同的操作。

Answer 2

看看这个小提琴：https://jsfiddle.net/ashpv5pt/

<section id="productInfo">
        <section class="productDescLargeLeft">
            <img src="http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.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="http://www.w3schools.com/css/trolltunga.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>


.productDescLargeLeft
{
float:left;
width: 410px;
position: relative;
}
.productDescLargeLeft p
{
background: none;
bottom: 120px;
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-size: 16px;
position: absolute;
color:white;
}
.productDescLargeRight
{
float:right;
width: 410px;
position:relative;
}
.productDescLargeRight p
{
background: none;
bottom: 120px;
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-size: 16px;
position:absolute;
color:white;
}

文字没有留在div

2 个答案: