圖片文字並排及左右環繞廣告

發表留言 人氣: 4606°c

想將圖片和文字放在頁面對齊/並排,或者想把網站的內容廣告放在左側或右側的位置,

而文字環繞廣告,看起來在同一行上,而且不占用空間,顯得美觀整潔。

圖片和文字對齊/同一行︰

代碼:
<img src="圖片地址" title="信息" align="right" hspace="5" vspace="5" />✡ 人不付出犧牲,就無法得到任何回報。想要得到什麼,就必須付出同等的代價。那就是鍊金­術中所說的,等價交換的原則。那時的我們深信着,這就是世界的真理。

運用:
hspace 設定左右的寬邊距
vspace 設定上下的距離
right(右) 也可以修改為 left(左),根據個人的喜愛,設定圖片左右放置。

預覽效果Demo▼

文章內容頁環繞廣告︰

CSS 代碼:
<style>
.content {
max-width: 650px;
}
#ads {
float: right; /* 如果設定廣告放在左邊,請修改為 float: left; */
margin: 0 0 15px 15px; /* 如果設定廣告放在左邊,修改為 margin: 0 15px 15px 0; */
width: 300px; /* 配合廣告尺寸 */
clear: both;
}
</style>

HTML 代碼:
<div class="content">
<div id="ads">
<img src="https://storage.googleapis.com/support-kms-prod/SNP_2922281_en_v1" ><!-- 廣告位置 -->
</div>
內容圖片/文字
</div>

預覽效果Demo▼

線上代碼測試︰ http://www.ifreesite.com/runcode.htm

標籤: