1

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

到目前为止，我能够将两个图像并排对齐，但我遇到了以下问题：

1) 文本在图像之间没有任何空格。

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

3) 文字大小与图片位置不匹配

4）无法将文本“Recent Publications”向左移动（我已经尝试了 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>
4

1 回答 1

2

首先，我建议重组您的 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>元素。这是无效标记，因为 a<span>是内联元素，而 a<p>是块级元素。内联元素不能包含块级元素。

于 2013-04-13T23:04:40.050 回答