用overflowauto ie下，长串会自动折行ff下，长串会被遮盖所以，综上，最好的方式是wordwrapbreakword overflowhidden而不是wordwrapbreakwordwordbreakbreakall CSS样式表代码布局基础教程课程9链接样式；CSS是Cascading Style Sheets层叠样式表的缩写是一种对web文档添加样式的简单机制，属于表现层的布局语言1基本语法规范 分析一个典型CSS的语句p COLOR#FF0000BACKGROUND#FFFFFF 其中quotpquot我们称为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；放两排图片有点大适当调小一点图片差不多应该可以的下面的代码是我调的，嗯，是左右平铺过去的你可以放在页面中试试 body listimg1 clearfloatleftwidth334pxpaddingleft10pxoverflow；9种水平居中方式CSS 01最常见的一种，代码示例如下图所示首先将big的一半像素大小赋给小图层，margin0auto通过文本对齐居中02第二种方法如下图所示，将大图层的显示设置为tablecell，然后将小图层的左边距取为；问题1你的LI没设置宽度，LI外面的容器宽度也要设置才能自动排列~问题2如果LI里面全部是英文单词或数字，就会出现不自动换行问题~问题3你用来测试时，不要全部打数字或英文问题4给LI加个 wordwrapbreakword。

用一个白色的，边沿虚化的，透明格式如PNG的直角三角形图片覆盖在文字上面即可这是最简单的方法也可以利用css3的底色渐变方式，在文字上面覆盖一个空白层，然后填充一个渐变的底色即可，比如forvar i=0ilt60；一使用js瀑布流插件推荐masonry 二使用css3样式 代码如下lt！DOCTYPE HTML布局ul* 栏宽度 *webkitcolumnwidth160pxmozcolumnwidth160pxocolumwidth160pxcolumnwidth160px* 两栏之间的；设定这两个层分别为x1和x2，宽度都为950像素，x1和x2的高度随各自的内容自动变化，x2可以自动适应x1 x1width950pxheightautofloatleftclearboth x2width950pxheightautofloatleftclearboth；左边那两个可以floatleft，右边那三个就floatright嘛每个div设置positionrelative相对定位，再设置lefttopright来稍微调整一下。

DIV宽度是3个LI宽度+内外边距+边框，给LI加上浮动，这样就会自动排列了如果你的图片宽度不一的，或者超过了LI宽度，那给IMG定义一个宽度100%，用承接LI的宽度就可以了注意，UL和LI是默认有内外边距的。

css部分如下imgwidth184px height140px floatleft marginright10px m0marginright0 html部分如下 说明图片宽度 184×5=920 剩余间距 960－920=40 5张图4个间距，每个 40÷4=10；不要用positionrelative 你采用ul+li布局，将每张图片放到li里面 给li指定宽度高度，overflowhiddenfloatleft，给ul指定位置就行了 ，如果想要完美的话，给图片进行缩略 然后图片就会整齐的排列啦。

看完了上述内容，那我们就来看看css选择器优先级的具体排序css选择器优先级最高到最低顺序为1id选择器#myid2类选择器myclassname3标签选择器div，h1，p4子选择器ul lt li5后代选择器li a6；选择器优先级通常我们可以将CSS的优先级由高到低分为六组1无条件优先的属性只需要在属性后面使用 ！important 它会覆盖页面内任何位置定义的元素样式IE 6不支持这个属性2第二高位的优先属性是在html中给元素；想要实现这个效果需要一定限制1瀑布流，竖向自动排列，可以实现这样的效果先分为4栏横向排列，在每栏里建立元素，这样就能够竖向自动排列 2绝对定位，将每个元素的位置设置好，定死 3li的形式按照你的代码写，完全；有个办法是写8个div标记对，中间加img插入图片，然后设置floatleft第246个div设置css属性clearright，这样就能够实现自动浮动成每2张图片为一排，后面的图片自动对齐的效果了。