CSS中的float屬性可以讓div在頁面中浮動,但有時我們希望讓某些div不浮動,該怎么做呢?
.div{ float: none; /*將浮動屬性設為none*/ }
可以通過設置float屬性為none,來取消div的浮動效果。
當我們希望幾個div一行顯示,而不是在不同行浮動時,也可以使用display屬性來實現。
.container{ display: flex; flex-wrap: wrap; } .div{ flex-basis: 33%; }
使用flex布局,將容器設置為flex,并將flex-wrap屬性設為wrap,這樣子元素會在一行顯示不下時自動換行。
然后通過設置子元素的flex-basis屬性,來確定每個元素占據的寬度。
另外還可以使用position屬性,將div設置為absolute或fixed,則不會浮動。
.div{ position: absolute; left: 50%; transform: translateX(-50%); }
通過將div的position屬性設置為absolute或fixed,將元素脫離文檔流,不會浮動。同時也可以使用left和translateX屬性,讓元素居中顯示。