但網頁設計師在進行網頁設計時,經常會遇到想將多個div進行並排顯示的問題,那麼我們可以通過怎樣的簡便方法就可以讓三個div在一個div下並排顯示呢,小漁這就為大家一一道來。
方法/步驟
首先我們需要打開自己電腦上安裝的DW軟件,然後新建一個html頁面,並保存在桌面上。
然後我們需要在該html頁面的body部分敲入部分代碼,基本上就是一個父級DIV下面有三個子級DIV。
然後我們在三個子div中輸入文字,然後在瀏覽器中測試,查看效果,可以看到默認情況下三個div是豎排顯示的。
接下來我們要這四個div賦予class屬性,使之具有不同的樣式,方便大家查看效果。
我們切換到瀏覽器的界面,對刷新,可以看到更改之後的頁面效果,相對之前,可以很方便的區分出三個div
接下來就是最關鍵的步驟,我們應該怎樣設置可以讓三個div換成並排顯示?只需要為三個中的前兩個設置float:left屬性,最後一個設置float:right屬性,或者是float:left屬性,都可以
之後再到瀏覽器中查看,就可以發現三個div並排顯示了。至此我們也就大功告成了。
注意事項
三個子div的寬度必須小於父級div的寬度,否則會換行顯示。
對於第三個div,float:left或者float:right均可以,但是一個是左浮動,一個是右浮動,還是有點區別的。大傢什麼時候用哪種浮動是要依據我們想達到的效果來定的。