可以替代浮動的inline-block

原創 rita_leng 2018-08-31 04:28

浮動有個缺點：脫離了原來的文檔流，導致父容器無高度。使用inline-block不會脫離文檔流，且無忘記清空浮動的困擾

並排的div都設置position:inline-block,vertical-align:top，width:xx%(百分比)

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

vue監聽滾動條-吸頂

mounted(){ window.addEventListener('scroll', this.handleScroll) } handleScroll () { var scrollTop = windo

你蠢哭我咯 2020-07-07 22:25:48

CSS圖片垂直居中方法整理集合

  看到問此問題的很多，所以花點時間整理下，歡迎大家提意見，做補充修改，謝謝！/*lesliezmz整理的方法 2010-01-19*/當writing-mode爲tb-rl 時，文檔流是從上到下，從右到左書寫。然後設置text-alig

八月游子 2020-07-07 06:33:50

css樣式，如何處理嵌套的表格邊框

表格table嵌套，邊框合併問題 外層table與內層table嵌套，內外表格都需邊框時，設置“border=1”，但邊框會重複，造成某些地方邊框粗，有些地方邊框細的問題。 解決辦法： 外表格樣式： <table borde

TingBlog 2020-07-05 20:31:17

CSS揭祕：4.邊框內圓角

邊框內圓角 背景知識：box-shadow，outline，“多重邊框” 一、兩個div嵌套 兩個div實現內圓角很容易，只需要內圓角外直角即可。 div First Try .box{ width: 200px;

Eighteen Z 2020-07-05 05:25:06

CSS揭祕：5.條紋背景（上）

條紋背景 背景知識：CSS線性漸變，background-size CSS線性漸變 background: linear-gradient(red, yellow, blue); background: linear-

Eighteen Z 2020-07-05 05:25:06

css實現input文本框與圖片行內水平居中對齊

css實現input文本框與圖片行內水平居中對齊 如圖輸入框與圖片不對齊 css樣式添加 input,img {vertical-align:middle;}

M.LNG@li 2020-07-04 22:07:23

解決舊版 IE 瀏覽器兼容問題

IE下大部分兼容性都是因爲haslayout屬性的觸發問題,儘量觸發haslayout屬性,可以減少很多IE下得兼容性問題,例如: 在IE6下,子級的寬度會撐開父級設置好的寬度. 準確設置好寬度. IE6中,元素浮動,如果寬度

ALSNEI 2020-07-02 21:18:45

前端代碼校驗工具

Sublime text配置前端代碼（JavaScript/Html/CSS）校驗工具 前端代碼檢查分別包括html、css、JavaScript三部分的檢查，代碼檢查需要安裝node。 安裝Package Control 給su

ALSNEI 2020-07-02 21:18:45

css 文字兩端對齊併兼容

 效果圖如下：   文本兩端對齊樣式： display:inline-block;text-align:justify;text-align-last: justify; justify文本兩端對齊，具體解釋就看css手冊哈，不多講。

qq_41211900 2020-07-02 09:13:29

整理常用的css樣式

背景色漸變 background-image: linear-gradient(90deg, #eddcb9 0%,#bd9c66 51%,#8a603a 100%); 邊框漸變 border-style:solid;     borde

qq_41211900 2020-07-02 09:13:18

css設置背景圖片拉伸全屏不重複

話不多說直接上圖我們只給了寬和高100%就會出現這種狀況 <template> <div class="hello"></div> </template> <script> export default { name: "H

侧耳倾听... 2020-06-29 16:00:13

純css實現簡單的風車效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device

萌二è招财猫！ 2020-06-28 14:19:02

僞類選擇器和僞類元素的用法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-

萌二è招财猫！ 2020-06-28 14:19:02

CSS3中各個瀏覽器內核兼容的設置

CSS3中-moz、-ms、-webkit和-o分別代表什麼意思 1、-moz-：代表FireFox瀏覽器私有屬性 2、-ms-：代表IE瀏覽器私有屬性 3、-webkit-：代表safari、chrome瀏覽器私有屬性

Yuyuquan 2020-06-25 19:47:26

移動端常見九宮格佈局

<div class="grid"> <ul class="item cf"> <li class="liItem"> <div>標題一</div> </li>

飞歌Fly 2020-06-25 13:21:33