Question

我有这个结构：

<span>
      <img src="images/logo.png" />
      <small>Title<small>
      <small>some text</small>
</span>

我希望结果如下：

-------------------------
      -
  img -    Title
      - -----------------
      -    some text
-------------------------

Answer 1

<span>
<div style="float: left;"><img src="images/logo.png" /></div>
<small>Title</small><BR>------------------<BR>
<small>some text</small>
</span>

Answer 2

如果您使用CSS来绝对定位跨度，那么您还可以使用图像和两个文本的绝对定位。例如：

Span {
  position: absolute;
  Left: x;
  Top: x;
  Right: auto;
  Bottom: auto;
}
Image {
  Position: absolute;
  Left: 0px;
  Top: 0px;
}
TextOne {
  position: absolute;
  Left: x;
  Top: 0px;
  Right: 0px;
  Bottom: X;
}
TextTwo {
  position: absolute;
  Left: X;
  Top: X;
  Right: 0px;
  Bottom: 0px;
}

请记住，当将某些东西绝对放在另一个元素中时，它会根据父元素而不是整个屏幕进行定位。对不起，我的帖子格式很奇怪，我是通过手机做的。

Answer 3

这将做你正在寻找的事情。您可以在文本中添加一些填充以使其看起来更好。

＆＃13;

span img {
  float: left;
}
span small {
  display: block;
}

＆＃13;

<span>
      <img src="images/logo.png"/>
      <small>Title<small>
      <small>some text</small>
</span>

＆＃13;

如何在span标记内对齐图像和文本

3 个答案: