可以替代浮动的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