Question

我有一个包裹img元素的span和另一个span元素，用于描述图像。我希望图像位于顶部，然后是图像下方的一些文本。我找到了一种使用firefox特定的css属性的方法，但这不适用于任何其他浏览器。有没有其他方法可以获得此效果或模仿它在Firefox中的外观？

HTML：

 <span class="image">
   <img class="" alt="pic" src="pic.jpg" />
     <span class="img-desc">
       Call us today!
       <span>888-888-8888</span>
     </span>
  </span>

CSS：

 .image {
    float: right;
    width: -moz-min-content;
}

Answer 1

<span class="image">
 <img class="" alt="pic" src="pic.jpg" />
  <br />
  <span class="img-desc">
   Call us today!
   <br />
   <span>888-888-8888</span>
  </span>
</span>

Answer 2

您可以通过清除图像元素来使用css执行此操作。清除图像后，您可以浮动将放置在图像下方的.img-desc（左侧或右侧）。这适用于任何宽度的图像。在我的例子中，我刚刚使用了默认图像，使其宽50px。

http://jsfiddle.net/2KANB/

Answer 3

将您的所有<span>更改为<div>，这样就可以了。这是因为，默认情况下，<div>（块级别）会在＆amp;之前导致换行符。在它之后，<span>（内联）没有。

http://jsfiddle.net/TbY4N/

<span>是为“内联”使用而设计的，通常，您不应该看到它们包含一堆其他标记或块级元素。虽然，你可以很容易地强迫它们表现得像<div>（块级），这是一个正确的语义问题。

Span versus Div according to the W3C wiki article...

“ div 元素，即除法的缩写，是块级别泛型   容器。 通常用于包裹其他块级别   元素，将它们组合在一起（有关详细信息，请参阅下一节）   对此的探索）。它也可以用来收集一个   一堆内联元素和/或文本，否则不合逻辑   适合另一个块级元素，但这应该是最后一个   手段“。

“ span 元素是内联级别通用容器。它也是   有助于通知文档结构，但用于分组   或包装其他内联元素和/或文本，而不是块级别   元件。“

如何使跨度仅与其内部的图像一样宽？

3 个答案: