手机端页面在布局图文时,由于手机尺寸问题出现比较尴尬的分配问题:
1.文字区域先布局采用padding:10px 10px 10px 150px;和position:relative;
2.图片w和h必须限定死,是1div的儿子之一,position:absolute到相应位置;
3.同2方法。
4.对于产品名位置需要设置超出为省略号,这种只有谷歌支持也就是使用webkit核心的,其他浏览器亲测无效,添加些许代码 能看起来差不多:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
height: 40px;
line-height: 20px;
具体数值依情况而定,说明一下,超出两行省略号的属性写法不在css规范,未来还是走着瞧吧。