将两个图像与文字对齐

Question

我想将本网站顶部的两张图片http://paulcwebster.com 与其旁边的文字对齐。

到目前为止，我能够对准对方旁边两个图像，但我的问题：

1）不具有图像之间的任何空间的文本。

2）文本对于不同浏览器上的图像太短或太长。

3）不具有文字大小相匹配的图片的网站

4）不能够文本“近期发表”向左移动后（我triend align =“left”，并把它在它自己的DIV）

这里是我的代码：

<div > 
<img src="gfx/FrontImage1.jpg" width="180" height="180" alt="Image1" style="float:left"> 
<img src="gfx/FrontImage3.jpg" width="180" height="180" alt="Image2" style="float:left"> 


<span ><p>Paul Christopher Webster is a freelance writer and documentary film director based in Toronto, Canada. He has reported from 20 countries since 1992.</p> 
Paul's work in film has appeared on the Arte, BBC, CBC, Deutsche Welle, Discovery, National Geographic, Slice, SWR and Vision Television networks. His work as a writer has been published in dozens of magazines, journals and newspapers across Canada, the U.S, and Europe. </p> 
<p>He has won four national magazine awards for his writing, and Tier One Journalism Award from the Canadian Institutes of Health Research. His work on documentary films has garnered awards from the Canadian Association of Journalists, Hot Docs, the Canadian Academy of Film and Television, and PARISCIENCE, the international festival of scientific films. 
<p>Paul&rsquo;s work focuses on themes in business, science, and politics. For samples of his work in these categories, please click on the links to articles below. 
</span> 
</div> 

Answer 1

首先，我建议你转型的HTML标记。在每个要控制的元素周围放置一个<div>或其他块级元素。事情是这样的：

<div class="container"> 
    <div class="photos"> 
     <img src="gfx/FrontImage1.jpg" width="180" height="180" alt="Image1"> 
     <img src="gfx/FrontImage3.jpg" width="180" height="180" alt="Image2"> 
    </div> 
    <div class="text"> 
     Your text goes here... 
    </div> 
</div> 

然后，写一些CSS来控制这些元素你想要的方式：我假设这里

.container { 
    overflow:hidden; // this keeps the floated objects inside the container 
    padding:5px; 
    border:solid 1px black; 
} 

.container .photos { 
    float:left; 
    margin-right:10px; // this puts some padding to the right of the photos 
} 

，你知道如何将样式表上面的CSS适用于你的页面。这应该解决问题1）和4）。实际上没有办法确保文本的大小始终与图像的高度匹配，因为它可以流动和更改，具体取决于浏览器的宽度和查看器正在使用的字体大小，所以我没有看到解决问题的方法2）和3）。

注：我看到您正在使用一个<span>元素来包含您的<p>元素。这是无效的标记，因为<span>是内联元素，而<p>是块级元素。内联元素不能包含块级元素。