J avoue que la solution que je vais te donner ne me convient pas.
J aurai prefere un "vertical-align=bottom" mais ca ne fonctionne pas. J ai essayé sur un "table-cell" et ca ne fonctionne pas. Il est probable qu il faille utiliser flex-box mais ca, je ne maitrise pas ! (j ai commandé le livre de Raphael, j ai hate de le recevoir).
Alors ma solution, ce sera de la bidouille ... mais ca fonctionne ponctuellement.
J ai mis les images dans des DIV. bien sur qu on mettra en inline-block. L'avantage, c'est que tu pourras mettre autre chose que des image dans ces block, au cas où. J ai dimensionné ces 2 DIV à 500 px de haut.
Et ca donne ca :
<body>
<div id="atome"><figure><img src="atome.jpg"></figure></div>
<div id="fusion"><figure><img src="fusion.jpg"></figure></div>
<section>texte jjjj dddddddddddddddd ddddddddddffffffffffffffffffffffffffffffffffffffff fffffffffffffffffffffffffffffffffffffffffffffffff ffffffffffffffffffffffffffffff ffffffffffffffffffffffffffffffffffff
ffffffffffffffffffffffffffffffffffffffffffff fffffffffffffffffffffffffffffffffffffffffffffffff fffffffffffffffffffffffffffffffffffffff fffffffffffffffffffffffffffffffffffffffffffff
ffffffffffffffff fffffffffffffffffffff
<br>ffffffffffffffffffffffffffffffffffffffff
ffffffffffffffffffffffffffffff
<br>:::::
....etc
</body>
et pour le CSS :
#atome{display: inline-block; float: left;}
#fusion{display: inline-block; float: right;}
#fusion img{margin-top: 60px;}
section{text-align: justify;}
div{height: 500px;}
