CSS筆記 浮動 在一行中均勻放好幾個盒子

2021-10-25 10:30:07 字數 1467 閱讀 8548

使用浮動,讓子盒子在父盒子裡面排布,然後使用左浮動使其排列

外邊距讓他們之間出現空隙

*

.father

.father span

.father .lastspan

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

人物** title

有的時候我們不能設定父盒子的高度,因為不確定子盒子到底有多少

但是不設定父盒子的高度,那他的高度就是0,後面的標準流盒子會出現在子盒子的地下

所以我們可以使用以下方法清除浮動

給父盒子加一句overflow: hidden;

這樣不給父盒子設定高度,子盒子就能把父盒子撐開

注:缺點是會切掉顯示不全的盒子

使用雙偽元素,新增給父盒子這個類

2.1新增乙個類clearfix

.clearfix:before,

.clearfix:after

.clearfix:after

/* 照顧低版本瀏覽器 */

.clearfix

2.2在父盒子中新增類clearfix

"father clearfix">

css用浮動的方法讓div在同一行

由於浮動框不在文件的普通流中,所以文件的普通流中的塊框表現得就像浮動框不存在一樣。如果在頁面中輸入了3個div 標籤,因為div是塊級元素,所以這3個div各佔一行,但是你為第乙個div設定了float right 浮動是第乙個div脫離就正常的文件流,所以第乙個div的位置空間 也就空了出來,下面...

css實現多個div在同一行並且div中內容可斷行

實現效果 l 測試測試 99.5 99.08 單位 kg l 測試測試 99.5 99.08 單位 kg l 測試測試 99.5 99.08 單位 kg l 測試測試 99.5 99.08 單位 kg l 測試測試 99.5 99.08 單位 kg l 測試測試 99.5 99.08 單位 kg l...

在GridView中新增一行 新行 如統計資訊等

dataset ds null string sql select from test using dbmanage db new dbmanage ds.tables 0 primarykey dc arr datarow dr ds.tables 0 newrow datarow dr sum ...