網站首頁 健康小知識 母嬰教育 起名 運動知識 職場理財 情感生活 綠色生活 遊戲數碼 美容 特色美食 愛好
當前位置:酷知知識幫 > 遊戲數碼 > 電腦

html中float浮動的使用方法?DIV+CSS浮動怎麼用

欄目: 電腦 / 發佈於: / 人氣:5.14K

正常下按順序寫入多個DIV是每個DIV佔一行的,也就是説所有DIV會一直垂直排列,這時候需要用到浮動代碼,具體用法我來詳細闡述一下。輕鬆可以實現所有DIV水平排列。

html中float浮動的使用方法?DIV+CSS浮動怎麼用

操作方法

(01)新建一個html網頁,在body中插入【<div class="content"></div>】並引入CSS【ent{width: 420px;height: 100px;background: #d4d4d4;padding: 5px 0 5px 5px;}】。

html中float浮動的使用方法?DIV+CSS浮動怎麼用 第2張

(02)在大DIV中插入一個DIV【<div class="a"></div>】並引入CSS【.a{width: 100px;height: 100px;margin-right: 5px;background: #ff0000;}】定義它的高,寬,外邊距,背景色。

html中float浮動的使用方法?DIV+CSS浮動怎麼用 第3張

(03)繼續添加一個同級的DIV【<div class="a b"></div>】並引入樣式a和樣式b,樣式B只定義背景色【.b{background: #FF5F00;}】。可以看到第2個DIV排到了第一個的下方位置。

html中float浮動的使用方法?DIV+CSS浮動怎麼用 第4張

(04)按照同樣的方法再添加2個同級的DIV並引入不同顏色的DIV【<div class="a c"></div><div class="a d"></div>】。然後引入CSS【.c{background: #FFED00;}.d{background: #00FF93;}】。刷新後可以看到預覽效果是4個IDV垂直排列的,怎麼能讓他們水平排列在一行呢?

html中float浮動的使用方法?DIV+CSS浮動怎麼用 第5張

(05)為了方便朋友們查看順序,把4個DIV分別插入一個數字,相當於給他們編一個號碼。

html中float浮動的使用方法?DIV+CSS浮動怎麼用 第6張

(06)接下來就要用到浮動代碼了。在4個DIV共用的a樣式中,加入左浮動【float: left;】。保存並刷新網頁可以看到已經都在一行上了,而且是按照編碼順序從左到右排列的。

html中float浮動的使用方法?DIV+CSS浮動怎麼用 第7張

(07)我們再來試一下右浮動【float:right】,可以看到DIV是從右向左排列的。現在朋友們知道怎麼使用浮動代碼了嗎?

html中float浮動的使用方法?DIV+CSS浮動怎麼用 第8張

特別提示

掌握這個方法,可以輕鬆實現DIV自動排列在一行哦

Tags:HTML float DIVCSS