2014-01-10 52 views
1

這是在段落文本中浮動圖像的最佳做法嗎?我想確保文本段落的頂部與圖片的頂部對齊,並且圖片周圍有填充物,以便文本不在。在段落中浮動圖像的最佳做法

看看我http://jsfiddle.net/huskydawgs/vrLeg/

<div style="float:right;padding:0 0 20px 30px"> 
    <img alt="Request White Paper" src="http://icons.iconarchive.com/icons/artbees/paradise-fruits/256/Pear-icon.png" /> 
</div> 
<p><strong>Authors: </strong>Don Bankes and Jennifer Blakc<br /> 
    <strong>Publication Date: </strong>January 2014</p> 

<p>The pear is any of several tree and shrub species of genus Pyrus /ˈpaɪrəs/, in the family Rosaceae. It is also the name of the pomaceous fruit of these trees. Several species of pear are valued for their edible fruit, while others are cultivated as ornamental trees. The genus Pyrus is classified in subtribe Pyrinae within tribe Pyreae.</p> 
<p>The genus is thought to have originated in present-day western China in the foothills of the Tian Shan, a mountain range of Central Asia, and to have spread to the north and south along mountain chains, evolving into a diverse group of over 20 widely recognized primary species[citation needed]. The enormous number of varieties of the cultivated European pear (Pyrus communis subsp. communis), are without doubt derived from one or two wild subspecies (P. communis subsp. pyraster and P. communis subsp. caucasica), widely distributed throughout Europe, and sometimes forming part of the natural vegetation of the forests. Court accounts of Henry III of England record pears shipped from La Rochelle-Normande and presented to the King by the Sheriffs of the City of London. The French names of pears grown in English medieval gardens suggest that their reputation, at the least, was French; a favored variety in the accounts was named for Saint Rule or Regul', Bishop of Senli</p> 
+0

你有一定的理由相信,這不是最好的做法? –

+0

這真是一個意見。例如,我會這樣做http://jsfiddle.net/j08691/vrLeg/1/。殺死添加的div並將圖像與文本分組。同樣的結果。 – j08691

回答

0

「最佳」 最好的做法是遵循的標準,提出了漂浮在HTML文件中規定:

this wiki on floatsthese specs,無論是從w3c

與往常一樣,您應該確保清除浮標以避免給未來的開發人員帶來麻煩。

1

我會在樣式表中創建一個圖像浮點類,然後將這個類應用到您想要左右浮動的圖像。

爲了讓它像你想要的那樣與文本段落對齊,那麼你應該將該項目向左或向右浮動,並且將圖像html放在作者/發佈日期之前的文本段落之前。

CSS:

.alignright { 
    float: right; 
    margin: 0px 0px 20px 30px; 
    } 

HTML:

<p><strong>Authors: </strong>Don Bankes and Jennifer Blakc<br /> 
    <strong>Publication Date: </strong>January 2014</p> 

    <img alt="Request White Paper" src="http://icons.iconarchive.com/icons/artbees/paradise-fruits/256/Pear-icon.png" class="alignright" /> 
<p>The pear is any of several tree and shrub species of genus Pyrus /ˈpaɪrəs/, in the family Rosaceae. It is also the name of the pomaceous fruit of these trees. Several species of pear are valued for their edible fruit, while others are cultivated as ornamental trees. The genus Pyrus is classified in subtribe Pyrinae within tribe Pyreae.</p> 
    <p>The genus is thought to have originated in present-day western China in the foothills of the Tian Shan, a mountain range of Central Asia, and to have spread to the north and south along mountain chains, evolving into a diverse group of over 20 widely recognized primary species[citation needed]. The enormous number of varieties of the cultivated European pear (Pyrus communis subsp. communis), are without doubt derived from one or two wild subspecies (P. communis subsp. pyraster and P. communis subsp. caucasica), widely distributed throughout Europe, and sometimes forming part of the natural vegetation of the forests. Court accounts of Henry III of England record pears shipped from La Rochelle-Normande and presented to the King by the Sheriffs of the City of London. The French names of pears grown in English medieval gardens suggest that their reputation, at the least, was French; a favored variety in the accounts was named for Saint Rule or Regul', Bishop of Senli</p>