1

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

案子：

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

理论：

我希望单词不是在图片下方而是在图片的右侧对齐。没有办法得到那个。

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

2 回答 2

0

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

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

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

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

​</p>

（见http://jsfiddle.net/zjA4f/2/）

于 2012-11-11T10:11:43.427 回答
0

也许你应该给图片周围的宽度。接下来，您应该为单词添加另一个。

就像是：

<div>
     <div width="10px" style="float: left; margin-right:10px;">picture</div>
     <div width="10px" style="float: left;">
          <p>word</p>
          <p>word1</p>
          <p>.....</p>
          <p>word20</p>
     </div>
</div>

在此处粘贴代码（先删除旧代码）并查看结果。

于 2012-11-11T10:12:41.407 回答