將兩個圖像與文字對齊

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>是塊級元素。內聯元素不能包含塊級元素。