網站H5前端開發之display水平排列

2023-03-09 分類：網站建設

Display 的幾個常用的屬性，如下圖：
第一個是block，是使元素變成塊級元素，元素會獨占一行，塊級元素寬度默認100%，可以設置寬度width、高度height、填充padding、間距margin的值。
第二個是inline，是使元素變成行內元素，可以與其他行內元素共占同一行，不會獨占一行，
不能設置寬度width、高度height，可以設置填充padding、間距margin左右的值。
第三個是inline-block，是使元素變成行內塊級元素，可以與其他行內元素共占同一行，元素不會獨占一行的，可以設置寬度width、高度height、填充padding、間距margin的值。
第四個是none，元素會隱藏，元素所占的空間也不會保留。

display屬性

Display: inline-block 可以搭配vertical-align一起使用，vertical-align的屬性有sub 、super、text-top、text-bottom、middle，對應的屬性的解釋如下圖：
在工作中遇到的項目，有的例如企業網站的新聞或者產品模塊，如下圖的效果，當上新聞圖片或者產品圖片的尺寸不同的時候，用浮動布局去做的話，可能排版會產生錯亂，那么可以用Display:inline-block;

效果如下圖：
CSS代碼

css下圖:

文章名稱：網站H5前端開發之display水平排列
文章分享：http://www.kartarina.com/news40/242740.html

成都網站建設公司_創新互聯，為您提供動態網站、品牌網站建設、建站公司、網站營銷、搜索引擎優化、營銷型網站建設

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容