html中float浮動的使用方法?DIV+CSS浮動怎麼用
正常下按順序寫入多個DIV是每個DIV佔一行的,也就是說所有DIV會一直垂直排列,這時候需要用到浮動代碼,具體用法我來詳細闡述一下。輕鬆可以實現所有DIV水平排列。
操作方法
(01)新建一個html網頁,在body中插入【<div class="content"></div>】並引入CSS【ent{width: 420px;height: 100px;background: #d4d4d4;padding: 5px 0 5px 5px;}】。
(02)在大DIV中插入一個DIV【<div class="a"></div>】並引入CSS【.a{width: 100px;height: 100px;margin-right: 5px;background: #ff0000;}】定義它的高,寬,外邊距,背景色。
(03)繼續添加一個同級的DIV【<div class="a b"></div>】並引入樣式a和樣式b,樣式B只定義背景色【.b{background: #FF5F00;}】。可以看到第2個DIV排到了第一個的下方位置。
(04)按照同樣的方法再添加2個同級的DIV並引入不同顏色的DIV【<div class="a c"></div><div class="a d"></div>】。然後引入CSS【.c{background: #FFED00;}.d{background: #00FF93;}】。刷新後可以看到預覽效果是4個IDV垂直排列的,怎麼能讓他們水平排列在一行呢?
(05)爲了方便朋友們查看順序,把4個DIV分別插入一個數字,相當於給他們編一個號碼。
(06)接下來就要用到浮動代碼了。在4個DIV共用的a樣式中,加入左浮動【float: left;】。保存並刷新網頁可以看到已經都在一行上了,而且是按照編碼順序從左到右排列的。
(07)我們再來試一下右浮動【float:right】,可以看到DIV是從右向左排列的。現在朋友們知道怎麼使用浮動代碼了嗎?
特別提示
掌握這個方法,可以輕鬆實現DIV自動排列在一行哦
-
如何將圖片轉換成word文字
在工作生活中,我們經常爲圖片文字識別的問題而煩惱,要知道圖片中的文字是不可編輯的,我們如果想將圖片中的文字提取出來,就只能使用識別工具對圖片進行識別,將其轉換成Word文字。可是,我們要選擇哪一款識別工具呢?大家如何將圖片轉換成Word文字呢?下面我們就一起來看看...
-
電腦無法訪問指定設備路徑或文件怎麼辦
關於電腦,現在很多人都在用它,但是有時候在打開一個程序的時候會發現突然顯示警告說無法訪問指定設備路徑或文件,下面我來教大家一種方法來解決這個問題。操作方法(01)首先我們要清楚我們安裝的這個程序,也就是軟件安裝位置在哪個盤,如果不清楚就點擊鼠標右鍵,然後打開...
-
愛剪輯怎樣截取視頻
今天的這篇和大家聊一聊關於愛剪輯怎樣截取視頻的問題,希望能夠幫助到有需要的朋友。操作方法(01)首先左鍵雙擊愛剪輯圖標,打開軟件,然後左鍵單擊片名旁邊的輸入框,輸入“示例”字樣,然後左鍵單擊製作者旁的輸入框,輸入“示例”字樣,左鍵單擊確定。(02)然後左鍵單擊左側的...
-
在Word文檔中怎麼樣進行簡繁體轉換?
字體有繁體和簡體之分,而Word文檔主要的功能是記錄保存文本文字,可能由於區域不一樣,有的喜歡用簡體有的喜歡用繁體,爲了方便查看,就需要用到簡繁體的相互轉換了。操作方法(01)方法一:比較常用的,就是用Word文檔自帶的簡繁體轉換功能,找到審閱——簡轉繁——便可將選擇的...