2013-06-20 85 views
18

我希望文本和圖像彼此相鄰,但我希望圖像位於屏幕的最左側,並且我希望文本位於屏幕的最右側。這是我目前擁有的...如何在HTML中彼此相鄰放置文本和圖像?

<body> 
<img src="website_art.png" height= "75" width= "235"/> 
<h3><font face="Verdana">The Art of Gaming</font></h3> 
</body> 

我該怎麼做?

感謝

+0

CSS:'float:left;'和'float:right'? – tymeJV

+7

''標記已從HTML5中移除。請刪除它,並用等效的CSS替換它;) – lifetimes

+0

您可以使用css將它們放在div中,並使用適當的浮動:右側或左側將它們放在它們各自的側面。 div的寬度可以設置爲允許你有「最左」和「最右」你想要的。 – Josh

回答

21
img { 
    float:left; 
} 
h3 { 
    float:right; 
} 

jsFiddle example

請注意,你可能會想使用的樣式clear:both上任何元素來自您所提供的代碼之後,使其不直接向上滑動下方浮動的元素。

+1

這工作得很好。謝謝。 – Combine

+0

唯一的問題是,一個父div將大小,這是一個問題,如果你使用的背景顏色等 – User

+0

@User「父div將大小」是什麼意思? – j08691

3

你想使用css float這個,你可以直接在你的代碼。

<body> 
<img src="website_art.png" height= "75" width="235" style="float:left;"/> 
<h3 style="float:right;">The Art of Gaming</h3> 
</body> 

但我真的會建議學習CSS的基礎知識,並將所有的樣式分成單獨的樣式表和使用類。它將在未來幫助你。開始的好地方是w3schools,或者也許晚點走到Mozzila Dev. Network (MDN)

HTML:

<body> 
    <img src="website_art.png" class="myImage"/> 
    <h3 class="heading">The Art of Gaming</h3> 
</body> 

CSS:

.myImage { 
    float: left; 
    height: 75px; 
    width: 235px; 
    font-family: Veranda; 
} 
.heading { 
    float:right; 
} 
0

您可以使用垂直對齊和浮動。

在大多數情況下,您想垂直對齊:中間,圖像。

下面是測試:http://www.w3schools.com/cssref/tryit.asp?filename=trycss_vertical-align

垂直對齊:基線|長度|子|超級|頂部|文本頂|中間|底部|文本底部|初始|繼承;

中間的定義是:元素放置在父元素的中間。

所以你可能想把它應用到元素中的所有元素。