圖片滑動與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;}