标签：灵活 set index img col 选择器 padding result height
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>爸爸去哪儿第五季</title> <link rel="stylesheet" type="text/css" href="../static/css/a.css"> </head> <body> <div class="recommend" > <div class="img"> <a href="https://image.baidu.com/search/index?ct=201326592&cl=2&st=-1&lm=-1&nc=1&ie=utf-8&tn=baiduimage&ipn=r&rps=1&pv=&fm=rs1&word=%E7%88%B8%E7%88%B8%E5%8E%BB%E5%93%AA%E5%84%BF%E9%99%88%E5%B0%8F%E6%98%A5%E7%88%B6%E5%AD%90&oriquery=%E7%88%B8%E7%88%B8%E5%8E%BB%E5%93%AA%E5%84%BF%E7%AC%AC%E4%BA%94%E5%AD%A3&ofr=%E7%88%B8%E7%88%B8%E5%8E%BB%E5%93%AA%E5%84%BF%E7%AC%AC%E4%BA%94%E5%AD%A3&hs=2&sensitive=0"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508508325304&di=ae7acb3227801534417bbe60af5a102a&imgtype=0&src=http%3A%2F%2Fcimage.tianjimedia.com%2FuploadImages%2FthirdImages%2F2017%2F264%2F2VC8780055WJ.jpeg"></a> <div class="desc"><a href="https://image.baidu.com/search/index?ct=201326592&cl=2&st=-1&lm=-1&nc=1&ie=utf-8&tn=baiduimage&ipn=r&rps=1&pv=&fm=rs1&word=%E7%88%B8%E7%88%B8%E5%8E%BB%E5%93%AA%E5%84%BF%E9%99%88%E5%B0%8F%E6%98%A5%E7%88%B6%E5%AD%90&oriquery=%E7%88%B8%E7%88%B8%E5%8E%BB%E5%93%AA%E5%84%BF%E7%AC%AC%E4%BA%94%E5%AD%A3&ofr=%E7%88%B8%E7%88%B8%E5%8E%BB%E5%93%AA%E5%84%BF%E7%AC%AC%E4%BA%94%E5%AD%A3&hs=2&sensitive=0">小小春</a></div> </div> <div class="img"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508509868509&di=6fe9969b4e9c5f2f33b70056670a778e&imgtype=0&src=http%3A%2F%2Fi-3.391k.com%2F2017%2F9%2F8%2F6439b5c2-fa74-4700-bbca-8bdca03f9753.jpg%3Fwidth%3D750%26height%3D578"> <div class="desc"><a href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1508499886314_R&pv=&ic=0&nc=1&z=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&hs=2&ctd=1508499886315%5E00_1266X627&word=%E7%88%B8%E7%88%B8%E5%8E%BB%E5%93%AA%E5%84%BF%E5%97%AF%E5%93%BC">嗯哼</a></div> </div> <div class="img"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1508499797&di=5d8b62ae0c14f665adb8495ac4551ee4&src=http://cimage.tianjimedia.com/uploadImages/thirdImages/2017/264/CVJ4FG1031BP.jpeg"> <div class="desc"><a href="https://image.baidu.com/search/index?ct=201326592&cl=2&st=-1&lm=-1&nc=1&ie=utf-8&tn=baiduimage&ipn=r&rps=1&pv=&fm=rs1&word=%E7%88%B8%E7%88%B8%E5%8E%BB%E5%93%AA%E5%84%BF%E5%90%B4%E5%B0%8A%E5%B8%A6%E5%A8%83&hs=2&oriquery=%25E7%2588%25B8%25E7%2588%25B8%25E5%258E%25BB%25E5%2593%25AA%25E5%2584%25BF%25E5%2590%25B4%25E5%25B0%258A&ofr=%25E7%2588%25B8%25E7%2588%25B8%25E5%258E%25BB%25E5%2593%25AA%25E5%2584%25BF%25E5%2590%25B4%25E5%25B0%258A&sensitive=0">neinei和max</a></div> </div> <div class="img"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508510557561&di=ad51b3f0e3a75d22effb3cd060ea21b2&imgtype=0&src=http%3A%2F%2Ffun.youth.cn%2Fyl24xs%2F201709%2FW020170926332503294291.jpg"> <div class="desc"><a href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1508500158069_R&pv=&ic=0&nc=1&z=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&hs=2&word=%E7%88%B8%E7%88%B8%E5%8E%BB%E5%93%AA%E5%84%BF%E5%B0%8F%E6%B3%A1%E8%8A%99">小泡芙</a></div> </div> <div class="img"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508510882469&di=9327c14a457b94f0fcf212764f9ba31a&imgtype=0&src=http%3A%2F%2Fwww.home8080.cn%2Fuploads%2Fallimg%2F170928%2F1_170928164228_1.jpeg"> <div class="desc"><a href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&fm=detail&lm=-1&st=-1&sf=2&fmq=1508500581475_R_D&fm=detail&pv=&ic=0&nc=1&z=&se=&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&hs=2&word=%E7%88%B8%E7%88%B8%E5%8E%BB%E5%93%AA%E5%84%BF%E5%B0%8F%E5%B1%B1%E7%AB%B9">小山竹</a></div> </div> <br> <div class="clearfolat"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508511028204&di=8ba56d4d6a2e60f04c870e1f970abf8a&imgtype=0&src=http%3A%2F%2Fimg.99danji.com%2Fuploadfile%2F2017%2F0908%2F20170908104354822.jpg"><br> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508511091213&di=e961f88f7e670ea8e9587157c5d0b9b5&imgtype=0&src=http%3A%2F%2Ff.expoon.com%2Fnews%2F2017%2F09%2F25%2F654695.jpg"><br> </div> </div> </body> </html
css文件：
img{ width: 300px; } div.img{ border: 1px solid burlywood; width:200px; height: 200px; float: left; margin: 5px; } div.img img{ width: 100%; height: 85%; } div.desc{ text-align: center; padding: 5px; } div.img:hover{ border: 2px solid greenyellow;} div.clearfolat{ clear: both; solid-color: black; }
截图如下：
标签：灵活 set index img col 选择器 padding result height
原文地址：http://www.cnblogs.com/222ya/p/7701402.html
