移动端布局杂谈
移动端 这种布局，你们怎么做的？
NO1：
图片position， 外层容器padding
线是细节，可以border+负margin，然后加入1border的做法 可以用伪类＋scale
高度要定，看需求，有max和min可以用
去研究下别人怎么写的吧，不同情况布局方法可能不一样
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Document</title> <style type="text/css" media="screen"> * { margin: 0; padding: 0; } .items { overflow: hidden; } .item { position: relative; display: block; min-height: 100px; padding-left: 100px; padding-top: 10px; padding-bottom: 10px; box-sizing: border-box; border: 1px solid #ededed; margin: -1px; } .item img { position: absolute; top: 10px; left: 10px; max-width: 80px; } .item h2 { font-size: 18px; } .item p { margin-top: 10px; font-size: 14px; } </style> </head> <body> <div class="items"> <a class="item"> <img src="1.png"> <h2>我是标题</h2> <p>我是描述我是描述我是描述我是描述我是描述</p> </a> <a class="item"> <img src="1.png"> <h2>我是标题</h2> <p>我是描述我是描述我是描述我是描述</p> </a> <a class="item"> <img src="1.png"> <h2>我是标题</h2> <p>我是描述我是描述我是描述</p> </a> </div> </body> </html>
1px方案我就不说了，我给你个地址 http://jinlong.github.io/2015/05/24/css-retina-hairlines/
NO2
每个div加个border-bottom 最后在用css3 nth-child(1)给第一个加个top的border
NO3
ul li 列表 分左右div 左边图片 右边文字 右边分上下布局 感觉应该可行
