W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
控制元素周圍內(nèi)容浮動(dòng)
Class
|
Properties
|
---|---|
float-right | float: right; |
float-left | float: left; |
float-none | float: none; |
使用 ?float-right
? 將一個(gè)元素浮動(dòng)到其容器的右邊。
<img class="float-right ..." src="path/to/image.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.</p>
使用 ?float-left
? 將一個(gè)元素浮動(dòng)到其容器的左邊。
<img class="float-left ..." src="path/to/image.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.</p>
使用 ?float-none
? 重置任何應(yīng)用于元素的浮動(dòng)。這是 float 屬性的默認(rèn)值。
<img class="float-none ..." src="path/to/image.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.</p>
要在特定的斷點(diǎn)處控制元素的浮動(dòng),請(qǐng)?jiān)谌魏维F(xiàn)有的浮動(dòng)功能類中前添加 ?{screen}:
? 前綴。例如,使用 ?md:float-left
? 來(lái)給中等大小的屏幕及以上應(yīng)用 ?float-left
? 功能。
<div class="bg-gray-200 p-4">
<img class="float-right md:float-left ...">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.</p>
</div>
關(guān)于 Tailwind 的響應(yīng)式設(shè)計(jì)功能的更多信息,請(qǐng)查看 響應(yīng)式設(shè)計(jì) 文檔。
默認(rèn)情況下, 針對(duì) float 功能類,只生成 responsive 變體。
您可以通過(guò)修改您的 ?tailwind.config.js
? 文件中的 ?variants
?部分中的 ?float
?屬性來(lái)控制為 float 功能生成哪些變體。
例如,這個(gè)配置也將生成 hover and focus 變體:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
float: ['hover', 'focus'],
}
}
}
如果您不打算在您的項(xiàng)目中使用 float 功能,您可以通過(guò)在配置文件的 ?corePlugins
?部分將 ?float
?屬性設(shè)置為 ?false
?來(lái)完全禁用它們:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
float: false,
}
}
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: