使用嵌入式樣式表修改嵌入圖像

我在嘗試創建圖像周圍的不規則線條時遇到了一些麻煩。基本上，我給了6張'我想要放在一起的圖像，讓幻想成爲一張圖像;文字整齊地包裹在它的左邊。使用嵌入式樣式表修改嵌入圖像

我被指示使用嵌入式樣式表進行此操作。我所做的是將每個'切片'封裝在一個div中（這樣我就可以設置每個切片的寬度），然後將所有這些div封裝到帶有「圖像」標識的div中。

現在裏面，在我的頭的底部我有以下代碼：

<style type="text/css"> 
    #images { 
     float: right; 
     clear: right; 
     margin: 0em 0em 0em 2em 
    } 
</style>

現在，圖像被放在一起，如，沒有間隙在兩者之間，但所有的圖像不能正確地浮動到右側。事實上，它看起來好像這些切片是左對齊的。如果他們正確對齊，它會看起來是正確的。

另外，本書要求將樣式應用於「內嵌圖像」。這很容易處理段落，標題和地址，但是我如何將樣式應用於內聯圖像，而不是像我剛纔那樣使用大量div？

如這裏要求是爲圖像的DIV代碼：

<div id="images"> 
     <div style="width:6.7em"><img src="king1.gif" alt=""></div> 
     <div style="width:7.85em"><img src="king2.gif" alt=""></div> 
     <div style="width:11.45em"><img src="king3.gif" alt=""></div> 
     <div style="width:14.25em"><img src="king4.gif" alt=""></div> 
     <div style="width:15.5em"><img src="king5.gif" alt=""></div> 
     <div style="width:16.6em"><img src="king6.gif" alt=""></div> 
    </div>

而且，我嘗試了以下無濟於事：

img { 
    float: right; 
    clear: right; 
    margin: 0 0 0 2em; 
}

來源

2011-06-18 thebill

您可以使用該後代選擇器。像#images div {}或#images img {}。但不#images {align：right;}幫助？如果你添加了圖像的html和它的容器（#images），那會很好。現在有點猜測。 – Gerben

爲什麼在圖像周圍的額外的div？只需在每張圖片上使用該確切樣式，請參閱http://jsfiddle.net/NGLN/B33kA/。

img { 
    float: right; 
    clear: right; 
    margin: 0 0 0 2em; 
}

來源

2011-06-18 21:55:54 NGLN

使用嵌入式樣式表修改嵌入圖像

回答

相關問題