在着陆页设计器中使用多列布局在多设备上让页面文字对中

Date10 月 14, 2017

着陆页设计器中,在自适应环境下要使文字对中有一定的难度。但如果使用多列布局则可轻松实现。我们下面看看是如何实现的:

1)文字的单列布局

多列布局-2这个是一个文字元素单独占据页面的整行。

2)文字的多列布局多列布局-1

这是将一个多列(3列)布局元素放入一个整行,左右两列各占10%的宽度,中间列80%,然后将一个文字元素放入中间列。

3)单列布局与多列布局的效果对比

多列布局-3

这是在Mac电脑上浏览两行的效果。可以看出下面这行是单列的,右边距太宽了,中间的文字没有对中。

 

多列布局-4

这是缩小屏幕后的浏览效果。

 

可以看出,利用多列布局可以轻松实现文字对中。如果不用多列,只用单列是比较难于实现的。实际上3列布局,就是利用了两边列的百分比来实现页面两边边距的动态变化。

 

创建强大易用的独立站

获得强大的吾店云网站,将自己从技术操作中解放出来,集中精力于网站构建、内容发布、营销转化和产品销售。