* { margin:0; padding:0; } body { background-color:#1d2025; font-family:'Arail'; } a { text-decoration:none; } h2 { text-align:center; padding:20px 0; background:-webkit-linear-gradient(left,#ffcb52 50%,#ff451f 80%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .container { width:400px; margin:10px auto 0; background:#ddd; } .justify { position:relative; width:100%; height:30px; text-align:justify; margin-bottom:20px; } i { width:30px; line-height:30px; display:inline-block; text-align:center; background:#333; color:white; border-radius:50%; overflow:hidden; font-style:normal; } .justify:after { content:""; display:inline-block; position:relative; width:100%; } p { width:380px; padding:10px; margin:5px auto; background:-webkit-linear-gradient(left,#3dade9,#bf2fcb); -webkit-background-clip:text; -webkit-text-fill-color:transparent; box-shadow:0 1px 0 1px rgba(43,220,146,0.25),0 -1px 0 1px rgba(129,214,106,0.25),1px 0 0 1px rgba(43,220,146,0.25),-1px 0 0 1px rgba(129,214,106,0.25),1px -1px 0 1px rgba(86,217,126,0.5),-1px 1px 0 1px rgba(86,217,126,0.5),1px 1px 0 1px rgba(0,223,166,0.75),-1px -1px 0 1px rgba(173,211,86,0.75); }
多列均匀布局问题理解:
通过给父级容器的伪元素( :after) 设置 inline-block ,设置宽度 100% ,配合容器的 text-align: justify 就可以轻松实现多列均匀布局; 再多配合几句 hack 代码,可以实现兼容到 ie6+ ,最重要的是代码不长,很好理解。