如何将特定文本与图像对齐

Question

我试图仅将1个段落对齐图像右侧而不是所有段落。没有表格，有没有办法做到这一点。使用表格会被视为糟糕的设计吗？

现在，我的段落和文章页脚都对齐图像的右侧。我希望我的文章页脚位于图像下方，而段落位于图像的右侧。

echo '<article>';
echo '<header>';
echo '<h2><a href="viewpost.php?id='.$row['postID'].'">'.$row['postTitle'].'</a></h2>'; 
echo '</header>';
echo '<p>Posted on '.date('jS M Y H:i:s', strtotime($row['postDate'])).'</p>';

echo '<p><img src="images/test.jpg" height="153" width="186" align="left">'.$row['postDesc'].'</p>';

echo '<footer>';
echo '<p><a href="viewpost.php?id='.$row['postID'].'">Read More</a></p>';
echo '</footer>';

echo '</article>';

Answer 1

首先，我建议您考虑懒惰服务器术语：将所有工作量提供给客户端（浏览器）。

解决方案

将您的图片及其描述放在容器元素中。

---

将display和说明容器元素的img属性设置为inline-block。

---

HTML

<div id="together">
    <img class="left" src="http://oi46.tinypic.com/wve6o6.jpg" />
    <div id="description" class="right">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
</div>

CSS

#together {
    border:3px solid #111;
}
.left {
    display:inline-block;
    width:200px;
    clear:left;
}
.right {
    display:inline-block;
    clear:right;
    margin-left:50px;   
    width:200px;
}

Live Demo

Answer 2

这不是那么简单。有valign属性，但在每个浏览器中它以不同的方式显示。在图像上使用style="float:left"而不是对齐，应该完成这项工作。