由于大搜的限制,我们的页面不方便使用rem,那么如何实现像这种“左图又文”或“左文右图”的样式呢?
难点1:图片高度随着宽度的大小而自适应
难点2: 文字区域需要和图片区域等高
针对于难点1:
我们可以用宽度百分比和padding-bottom的百分比代替高度来解决这个问题,这样我们就有了这样的一个宽高等比例的容器。
tips:padding的百分比是参考当前父容器内文字排列方向有关的,即文字横向排列则以父容器宽度为基准,竖向排列则以父容器的高度做基准。
难点2:
我们同样用padding-bottom,而高度一定要设置0,我们完全用padding来代替高度,这样就实现了右侧左右图文布局