我想将文本放在图像顶部的右侧,但它始终位于图像下方的右侧,我将代码留在html
里面,我想知道它是否可以在 inhtml
或 in 中完成css
?因为我在css
.
<div>
<img src="http://lorempixel.com/300/200/"> (imagen en cuestion)
<p>Lista de Lubricantes</p> <!-- esto es lo que quiero que vaya a la derecha -->
</div>
我想将文本放在图像顶部的右侧,但它始终位于图像下方的右侧,我将代码留在html
里面,我想知道它是否可以在 inhtml
或 in 中完成css
?因为我在css
.
<div>
<img src="http://lorempixel.com/300/200/"> (imagen en cuestion)
<p>Lista de Lubricantes</p> <!-- esto es lo que quiero que vaya a la derecha -->
</div>
我看到几乎每个人都告诉你使用
float: left
它的事实,但是,没有人向你解释为什么会出现这种效果。实际上,这是因为标签
p tags
具有默认属性display: block
,这使得它们充当块并且文本降低到图像下方。但是,您可以使元素表现得像元素
inline
(放置在同一行)但具有块的属性(它们可以具有高度、宽度......)。这是通过属性实现的display: inline-block
。这样,文本将放置在图像的右侧,因为它将与图像位于同一行。最后,要将文本放在顶部,您可以使用 property
vertical-align
,这是一个仅作用于元素的属性,inline
但由于我们已经表明我们的文本作为,inline-block
所以它允许我们使用它。通过这个属性,我们可以确定元素将inline
在它所在的行内对齐的位置。在这种情况下,由于我们希望它位于顶部,我们将不得不使用top
.如果您希望文本出现在图像的右侧,您所要做的就是将图像浮动到左侧(使用
float:left
):您可以删除
<p>
并style="float:left;
在图像中定义 。此代码可能会对您有所帮助。您将图像和文本放在一个公共容器中,然后通过绝对位置来调整该容器中文本的位置。