-1

我试图仅将 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>';
4

2 回答 2

2

首先，我建议您考虑惰性服务器术语：将所有可能的工作负载交给客户端（浏览器）。

解决方案

将您的图像及其描述放入容器元素中。

将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;
}

现场演示

于 2013-07-29T17:37:16.147 回答
0

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

于 2013-07-29T17:37:44.197 回答