css布局如何在不同的手机分辨率下对齐？

Question

有两张图片，第一张图片是大图用group-2div包裹,css用百分比设置好了，百分比设置能够随分辨率变化而自动拉伸

.group-2{
    width: 55%;
    position:relative;
    -moz-transform: translate(35%);
    -ms-transform: translate(35%);
    -webkit-transform: translate(35%);
    transform: translate(35%);
}

现在想把这右边的图片与group-2底图的这个黑色竖线对齐，有没有什么办法让其适应不同手机分率，始终靠在一起

Answer 1

这不就是个数学题……
然后还缺一个参数：黑线离图片左边占图片宽度的百分比 X。
设页面全宽为 a px，则图片宽度为 0.55a。
这样就可以得到黑线离该图片左边的距离为 0.55aX。
同时也可以得到图片离页面左边距离 0.55ax0.35 = 0.1925a。
加起来就是 0.55aX + 0.1925a
写作 css，a 换成百分比就行了

Answer 2

小图片设置成绝对定位，外面的 group2-div 增加 postion: relative，左侧 left 的距离也设置成百分比试试