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

Question

我需要做一些看起来很容易的工作（如某些SO主题所述 ），但对我不起作用。 我需要像下面的示例一样放置一些图像和文本：

_______________
|              |              
|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-qc-300-300-3.jpg"> <p> <strong>Responsivo</strong> <br> <strong class="light">Isso normalmente deveria ser correto</strong> </p> </div> 

Answer 2

我想这就是你想要的？

.img{ 
float: left;
margin-right:1rem;
}
h3 {
color:red;
}
h5 {
color:green;
}

链接

http://codepen.io/damianocel/pen/zNwjyz

还是您希望h3和h5在img之下？