CSS定位: all variants tried,无进展

Question

我已经阅读了有关类似问题的其他帖子。但这种“有点”没有帮助。

案例:

在表格单元格中，我有一张缩略图。它停靠在左上角，我没有任何指示。美好的。 然后我想要提到那张照片的文字。如果我什么都不做，它们会将自己对齐到图片下方并平行于单元格的左侧。

理论:

我希望文字不是在图片下方对齐，而是在图片右侧对齐。没办法得到那个。

1. 忘掉绝对定位吧，因为我们正在动态显示未知数量的行，所以相对于页面坐标来说，这会是一团糟。

2. 如果您尝试使用 margin-left、margin-right 等来定位它们，它也不会起作用。原因:每个城镇的长度不同，所以一个词可以用另一个词就不行。

3. 如果您尝试相对定位，它也不会起作用。原因:规则说相对的东西相对于元素的正常位置定位从属。我们已经看到元素的正常位置是落在图片下方，所以虽然我可以将它们定位到与第一个元素相关的位置，但事实证明第一个元素的位置错误，因此，所有依赖项都将是也是。

如果我使用 marging-right 等将第一个元素定位在我想要的位置，其他元素的相对定位将不起作用，因为我想要的位置不是单词在文档中定位的位置.

我有这个元素: 图片 价格 镇 地区 作为元素，除了图片

<tr class=<?php  echo $fila?>>


<td>
<?php echo "<img src= http://localhost/housing2/assets/uploads/thumbs/$oferta->thumb_a>"?>

<ul>

<li>
<div id ="listado"><?php echo $oferta->price?></div>
</li>

<li class = "listado.town">
<div id ="listado_town" ><?php echo $oferta->nombre_localidad?></div>
</li>

<li class = "listado.region">
<div id ="listado_region"><?php echo $oferta->nombre_region?></div>
</li>

<li class = "listado.m2">
<div id ="listado_metros" ><?php echo $oferta->m2?></div>
</li>

</ul>


</td>

和CSS

.listado.town{position:relative; bottom:10px;}
.listado.region{position:relative;bottom:15px;}
.listado.m2{position:relative;bottom:20px;}

但这只是我尝试过的 20 次中的一次。这个将图片下方和左侧的所有元素对齐，实际上我认为它是如此不正确，以至于读者忽略了我的错误，然后它只是将它们对齐，因为它们自然会出现在文档中

其他组合:

考虑到指导标签是价格，我将其放置在文档中自然出现的位置，正如我所说，它位于图片下方。 然后我可以通过使用相对位置正确定位所有其余部分，是的，这很容易并且符合预期，但是父价格，价格，定位不正确:

原来如此

li.listado_town{position:relative; bottom:160px; left:130px;}
li.listado_region{position:relative;bottom:150px; left:130px;}
li.listado_m2{position:relative;bottom:140px; left:130px;}

Answer 1

您可以通过告诉图像 float: left; 并确保您的表格单元格足够宽来实现这一点

td {
    min-width: 400px;
}
img {
    margin-right: 10px;
    float: left;
}

• 检查一下:http://jsfiddle.net/zjA4f/

或者，如果您不想指定表格宽度，您可以使 ul 元素内联。使用 vertical-align 可以轻松地将其相对于图像定位的额外好处:

img {
    margin-right: 10px;
    vertical-align: middle;
}
ul {
  display: inline-block;
  vertical-align: middle;
}

(参见 http://jsfiddle.net/zjA4f/2/)