用overflowauto ie下，長(zhǎng)串會(huì)自動(dòng)折行ff下，長(zhǎng)串會(huì)被遮蓋所以，綜上，最好的方式是wordwrapbreakword overflowhidden而不是wordwrapbreakwordwordbreakbreakall CSS樣式表代碼布局基礎(chǔ)教程課程9鏈接樣式；CSS是Cascading Style Sheets層疊樣式表的縮寫(xiě)是一種對(duì)web文檔添加樣式的簡(jiǎn)單機(jī)制，屬于表現(xiàn)層的布局語(yǔ)言1基本語(yǔ)法規(guī)范 分析一個(gè)典型CSS的語(yǔ)句p COLOR#FF0000BACKGROUND#FFFFFF 其中quotpquot我們稱(chēng)為quot選擇器quot；AAAA BBBB CCCC DDDD EEEE FFFF css部分nav margin 0 autoborder 2px solid #00CED1 ul，li margin 0pxpadding 0pxliststyle ul display flexflexdirection rowflexwrap；放兩排圖片有點(diǎn)大適當(dāng)調(diào)小一點(diǎn)圖片差不多應(yīng)該可以的下面的代碼是我調(diào)的，嗯，是左右平鋪過(guò)去的你可以放在頁(yè)面中試試 body listimg1 clearfloatleftwidth334pxpaddingleft10pxoverflow；9種水平居中方式CSS 01最常見(jiàn)的一種，代碼示例如下圖所示首先將big的一半像素大小賦給小圖層，margin0auto通過(guò)文本對(duì)齊居中02第二種方法如下圖所示，將大圖層的顯示設(shè)置為tablecell，然后將小圖層的左邊距取為；問(wèn)題1你的LI沒(méi)設(shè)置寬度，LI外面的容器寬度也要設(shè)置才能自動(dòng)排列~問(wèn)題2如果LI里面全部是英文單詞或數(shù)字，就會(huì)出現(xiàn)不自動(dòng)換行問(wèn)題~問(wèn)題3你用來(lái)測(cè)試時(shí)，不要全部打數(shù)字或英文問(wèn)題4給LI加個(gè) wordwrapbreakword。

用一個(gè)白色的，邊沿虛化的，透明格式如PNG的直角三角形圖片覆蓋在文字上面即可這是最簡(jiǎn)單的方法也可以利用css3的底色漸變方式，在文字上面覆蓋一個(gè)空白層，然后填充一個(gè)漸變的底色即可，比如forvar i=0ilt60；一使用js瀑布流插件推薦masonry 二使用css3樣式 代碼如下lt！DOCTYPE HTML布局ul* 欄寬度 *webkitcolumnwidth160pxmozcolumnwidth160pxocolumwidth160pxcolumnwidth160px* 兩欄之間的；設(shè)定這兩個(gè)層分別為x1和x2，寬度都為950像素，x1和x2的高度隨各自的內(nèi)容自動(dòng)變化，x2可以自動(dòng)適應(yīng)x1 x1width950pxheightautofloatleftclearboth x2width950pxheightautofloatleftclearboth；左邊那兩個(gè)可以floatleft，右邊那三個(gè)就floatright嘛每個(gè)div設(shè)置positionrelative相對(duì)定位，再設(shè)置lefttopright來(lái)稍微調(diào)整一下。

DIV寬度是3個(gè)LI寬度+內(nèi)外邊距+邊框，給LI加上浮動(dòng)，這樣就會(huì)自動(dòng)排列了如果你的圖片寬度不一的，或者超過(guò)了LI寬度，那給IMG定義一個(gè)寬度100%，用承接LI的寬度就可以了注意，UL和LI是默認(rèn)有內(nèi)外邊距的。

css部分如下imgwidth184px height140px floatleft marginright10px m0marginright0 html部分如下 說(shuō)明圖片寬度 184×5=920 剩余間距 960－920=40 5張圖4個(gè)間距，每個(gè) 40÷4=10；不要用positionrelative 你采用ul+li布局，將每張圖片放到li里面 給li指定寬度高度，overflowhiddenfloatleft，給ul指定位置就行了 ，如果想要完美的話(huà)，給圖片進(jìn)行縮略 然后圖片就會(huì)整齊的排列啦。

看完了上述內(nèi)容，那我們就來(lái)看看css選擇器優(yōu)先級(jí)的具體排序css選擇器優(yōu)先級(jí)最高到最低順序?yàn)?id選擇器#myid2類(lèi)選擇器myclassname3標(biāo)簽選擇器div，h1，p4子選擇器ul lt li5后代選擇器li a6；選擇器優(yōu)先級(jí)通常我們可以將CSS的優(yōu)先級(jí)由高到低分為六組1無(wú)條件優(yōu)先的屬性只需要在屬性后面使用 ！important 它會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式IE 6不支持這個(gè)屬性2第二高位的優(yōu)先屬性是在html中給元素；想要實(shí)現(xiàn)這個(gè)效果需要一定限制1瀑布流，豎向自動(dòng)排列，可以實(shí)現(xiàn)這樣的效果先分為4欄橫向排列，在每欄里建立元素，這樣就能夠豎向自動(dòng)排列 2絕對(duì)定位，將每個(gè)元素的位置設(shè)置好，定死 3li的形式按照你的代碼寫(xiě)，完全；有個(gè)辦法是寫(xiě)8個(gè)div標(biāo)記對(duì)，中間加img插入圖片，然后設(shè)置floatleft第246個(gè)div設(shè)置css屬性clearright，這樣就能夠?qū)崿F(xiàn)自動(dòng)浮動(dòng)成每2張圖片為一排，后面的圖片自動(dòng)對(duì)齊的效果了。