图片滑动与h3标签

Question

我有一个图像和h3标签在一起，我需要他们并排。

<img src="..." alt="..." /><h3>Shopping Cart</h3> 

但图像滑落。我该如何解决这个问题？

Answer 1

float:left;使用两个 或display:inline;可能是更好的尝试都

Answer 2

浮动2元 float:left为IMG 和float:right为H3标签

如果没有对H3足够的空间，那么它会下去。而不是浮动 使用display:inline-block尝试

<img src="..." style="float:left" alt="..." /><h3 style="float:right">Shopping Cart</h3> 

Answer 3

display: inline两个会更好地工作。另一件事是你应该把它们放在一个固定宽度（即：width: ___px）或最小宽度（即：min-width: ___px）的div中，这样你就可以保持足够的水平空间让它们并排放置。不管你用什么办法让他们坐在一起，如果没有足够的宽度，而且你没有保留宽度，那么他们会崩溃并垂直堆叠。

Answer 4

如果图像有关的标题，然后IMG标记应该去H3内部：

<h3><img ... /> Shopping Cart</h3>

一旦你做到了这一点，你可以在图像的垂直对齐方式相适应通过使用类似标题的基线：

h3 img {top:5px}

另一个想法是完全去除IMG并给予H3一类特殊的名称，其添加填充并显示图标作为背景图像。这很好，因为更改样式表比HTML模板更容易，代码更短，页面更易于访问。

h3.shoppingcart {padding-left: 20px; background:url("cart.gif") center left no-repeat;}