html & css - 以正确方式对齐的图像和文本不起作用

Question

我需要帮助来做一些看起来很容易(如 some SO topics 中所述)但对我不起作用的事情。我需要按照与以下示例相同的方式放置一些图像和文本:

_______________
|              |              
|IMG      IMG  |
|   IMG        |  <h4>Big text here</h4>
|      IMG     |  Simple <h5> text here, saying                   
| IMG          |  more about the image on side.
|_________IMG__|

我试过的代码也来自 SO，并且是:

.img{ 
    float: left;
    margin-right:1rem;
}

.ban2 {
    font-size: 23px;
}

<div>
    <img class="img" width="500" src="img/Final-IMG.png">
    <p>
        <h3>Responsivo</h3>
        <br>
        <h5 class="light">Isso normalmente deveria ser correto</h5>
    </p>
</div>

文字就像是在左侧没有边距的中断，而不是在图像的右侧。任何人都可以帮助我实现我想要的结果吗？谢谢!

Answer 1

这里有几个问题:

1. 仅仅因为您看到了一个 SO 示例并不意味着它是正确的或将永远按预期工作。学习调试和仔细检查他人的工作。
2. 您的代码与链接到的示例不同。你改变了足够多的东西来打破它。
3. 标题不属于段落内部。如果您查看生成的标记，您会看到浏览器将段落分成两部分，试图修复损坏的标记。

.img{ 
    float: left;
    margin-right:1rem;
}

.ban2 {
    font-size: 23px;
}

<div>
    <img class="img" width="300" src="http://lorempixel.com/output/cats-q-c-300-300-3.jpg">
    <p>
        <strong>Responsivo</strong>
        <br>
        <strong class="light">Isso normalmente deveria ser correto</strong>
    </p>
</div>