在CSS中,我們可以通過一些屬性和技巧來幫助我們把圖片橫擺。
/* 將圖片設為塊級元素,才能使用margin */ img { display: block; } /* 使用margin-left和margin-right使圖片居中 */ img { margin-left: auto; margin-right: auto; } /* 使用float屬性將圖片橫向排列 */ img { float: left; /* 或 right */ margin: 0 10px 10px 0; /* 設置margin來控制圖片間距 */ }
上述代碼演示了三種常用的方式來橫排圖片。第一種通過將圖片設為塊級元素,然后使用margin-left和margin-right將其居中。第二種通過使用float屬性將圖片橫向排列,同時設置一定的margin來控制圖片間距。
需要注意的是,當使用float屬性時,父元素的高度可能會塌陷。因此,最好給父元素設置一個clearfix類,以使其不受此影響。
/* 清除浮動 */ .clearfix::after { content: ""; display: block; clear: both; }
上一篇css怎么引用網絡字體
下一篇jquery走馬燈原理