CSS div居左靠左顯示的方法

發(fā)布時間：2022-03-04 16:28:24 來源：億速云閱讀：5537 作者：iii 欄目：web開發(fā)

這篇文章主要介紹“CSS div居左靠左顯示的方法”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“CSS div居左靠左顯示的方法”文章能幫助大家解決問題。

小例：
為了觀察DIV是否靠左顯示，我們設(shè)置其css寬度為300px;高度為120px；邊框?yàn)?px黑色邊框，DIV命名為“.div-left”

1、css代碼：

.div-left{width:300px;height:120px;border:1px solid #000;float:left}

2、html應(yīng)用代碼片段：

<div class="div-left">此盒子是居左的</div>

3、完整CSS+DIV代碼：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>億速云居左實(shí)例</title> <style> .div-left{width:300px;height:120px;border:1px solid #000;float:left} /* css注釋說明：float:left設(shè)置居左靠左 */ </style> </head> <body> <div class="div-left">此盒子是居左的</div> </body> </html>

大家可動手將以上代碼拷貝使用觀察結(jié)果，是否實(shí)現(xiàn)div標(biāo)簽盒子靠左居左顯示。

4、案例截圖：

CSS div居左靠左顯示的方法
div css實(shí)現(xiàn)盒子靠左居左實(shí)例截圖

我們設(shè)置靠左靠右、居左居右都使用css浮動樣式單詞float，其樣式值為left是居左，right是居右。

關(guān)于“CSS div居左靠左顯示的方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。

向AI問一下細(xì)節(jié)

CSS div居左靠左顯示的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽