html - 将两个图像与文本对齐

Question

<分区>

Answer 1

首先，我建议重组您的 HTML 标记。放一个<div>或您要控制的每个元素周围的其他 block 级元素。像这样:

<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>是 block 级元素。内联元素不能包含 block 级元素。