2013-10-10 52 views
0

嘗試將圖像浮動到某些文本的左側。圖像需要鏈接到某個東西。但是,該鏈接僅適用於圖像的某些部分。內部鏈接圖像包裹文本的浮動Div

見代碼在這裏:http://jsfiddle.net/JaUXp/

#rightImg { 
    float: right; 
    width: 45%; 
    margin: 0 0 15px 15px; 
} 

#leftTxt { 
    position: relative; 
} 
<div id="rightImg"> 
    <a href="http://google.com"> 
     <img src="myimg.jpg" /> 
    </a> 
</div> 
<div id="leftTxt"> 
    <p>my text</p> 
</div> 

回答

0

的原因,我離開了DIV的位置屬性設置爲 「相對」,是因爲normalize.css的。我的解決方案是將DIV上的position屬性設置爲「static」。

+0

我已經證實了這部作品在FF24,Chrome瀏覽器30和IE8。 – SERVANT14

+0

http://jsfiddle.net/JaUXp/1/ – SERVANT14

0

你可能尋找的東西如下:

http://jsfiddle.net/DJruJ/

HTML 
<div id="container"> 
    <a href="http://google.com" target="_new"> 
     <img src="http://image.yaymicro.com/rz_512x512/0/4fd/pile-from-dominoes-on-black-background-4fd987.jpg" /> 
    </a> 
</div> 
<div id="description"> 
    <p>One late author did indeed venture to assert, and to prove, that the tendency to move, the power or force that produces actual motion, is </p> 
</div> 


css 

#container { 
    float: left; 
    width: 45%; 
    margin: 0 10px 15px 0; 
} 
#container img{ 
    width:100%; 
} 
#description { 
    position: relative; 
    float:left; 
    width:50%; 
} 

您正在使用 「rightImg」 和 「leftTxt」 爲元素的ID。它不推薦使用這種命名約定,因爲將來你的左文可能會變成正確的文字,反之亦然。在這種情況下它可能是一個有點混亂

希望這有助於

相關問題