2016-12-21 57 views
0

我試着從左邊和右邊浮動代碼,也從左和右對齊它,但它不會像文本或懸停圖像一樣留在同一行上另一個。我有點困惑我做錯了什麼,你們可以幫我嗎?把html懸停在右邊,而在右邊添加文字

的jsfiddle:http://jsfiddle.net/W3Pxv/344/

<span class="right"><a href="http://discord.me/animalcrossingchat"><img src="http://i.imgur.com/1HcjGUB.png?1" onmouseover="this.src='http://i.imgur.com/Y3qUfNt.png?1'" onmouseout="this.src='http://i.imgur.com/1HcjGUB.png?1'" /></a></span><span class="left">Animal Crossing Community gives you an unlimited amount of possibilities. Do you want to share some unforgettable moments of your own animal crossing experience or just talk about anything noteworthy that comes to your mind on our plaza? Why don't you grab a cup of coffee and talk about more serious matters in the roost? Become a premium member and enjoy a variety of new features and much more. 

Be part of our community by earning bells, answering the question of the day or winning valuable prices on our server's contests. You are what you make yourself to be on Animal Crossing Community. Join today and become the newest member.</span> 

定製CSS:

.right { 
    float:right; 
} 

.left { 
    float:left; 
} 
+0

放在右jfiddle,是我不好。 –

+1

很難理解你想要完成什麼。你想在一邊看到圖像,在另一邊看到文字,而不是現在的樣子? –

+1

請正確格式化您的代碼 - 很難閱讀 – ochi

回答

2

.left內聯塊的顯示器和一個固定的寬度。

像這樣:

.left{ 
    width: 420px; // size is interchangable 
    display: inline-block; 
    float:left; 
} 

小提琴:http://jsfiddle.net/W3Pxv/348/

+0

完美,謝謝! –

+0

@AntonioVallez請標記爲已修復您的問題,如果它幫助你:) –