用CSS配置副圖片並排版 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 21

0

自我挑戰組

從零開始自學HTML/CSS網頁設計系列第 21 篇

用CSS配置副圖片並排版

14th鐵人賽

2022-10-04 11:23:05

542 瀏覽

分享至

上面是之前在HTML檔裡做的設定。

首先我想要讓聲演者的圖片置於文字左側，可以在選擇器「.actor img」指定float屬性來做設定:

.acyor img {
    float: left;
}

但打開瀏覽器後我們會發現文字只是繞排在圖片的右邊，不是我們想要的結果:

這時候就可以在「.actor」選擇器中輸入「overflow:hidden」:

.actor{
    overflow:hidden;
}

但覺得圖片和文字太過緊密，所以在img元素加上右邊界:

.actor img{
    margin: 0 16px 0 0;
}

float屬性
定義:
是讓元素浮動定位靠左或靠右座配置的屬性。
clear屬性
定義:
解除float屬性的繞排。
overflow屬性
定義:
內容無法完整放入盒子時，指定超出的內容要怎麼顯示的屬性。

用CSS配置主圖片並裝飾

依照瀏覽器寬度來調整圖片

系列文

從零開始自學HTML/CSS網頁設計共 30 篇

目錄

RSS系列文訂閱系列文

2 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22201 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙