溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css讓塊靠右的實(shí)現(xiàn)方法

發(fā)布時(shí)間：2020-11-30 11:10:54 來(lái)源：億速云 閱讀：229 作者：小新 欄目：web開發(fā)

這篇文章主要介紹css讓塊靠右的實(shí)現(xiàn)方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

css想讓塊靠右的實(shí)現(xiàn)方法：可以通過(guò)float屬性來(lái)實(shí)現(xiàn)，如【float:right;】，表示元素向右浮動(dòng)。float屬性用于定義元素在哪個(gè)方向浮動(dòng)，left表示元素向左浮動(dòng)，right表示元素向右浮動(dòng)。

相關(guān)元素：

float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過(guò)在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。

屬性值：

  • left    元素向左浮動(dòng)。

  • right    元素向右浮動(dòng)。

  • none    默認(rèn)值。元素不浮動(dòng)，并會(huì)顯示在其在文本中出現(xiàn)的位置。

  • inherit    規(guī)定應(yīng)該從父元素繼承 float 屬性的值。

代碼實(shí)現(xiàn)：

<html>
<head>
<style type="text/css">
img 
{
float:right
}
</style>
</head>

<body>
<p>在下面的段落中，我們添加了一個(gè)樣式為 <b>float:right</b> 的圖像。結(jié)果是這個(gè)圖像會(huì)浮動(dòng)到段落的右側(cè)。</p>
<p>
<img src="/i/eg_cute.gif" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>

</html>

實(shí)現(xiàn)效果：

css讓塊靠右的實(shí)現(xiàn)方法

以上是“css讓塊靠右的實(shí)現(xiàn)方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手