为什么编的手机css3页面晃动里表格界面左右晃动

来源：蜘蛛抓取(WebSpider) 时间：2018-08-08 00:03 标签： css3页面晃动

 PC上制作好的报表在手机端查看嘚时候，报表软件默认的自适应效果不尽人如意例如，报表比较大到手机上被缩的非常小，字都看不清等等为此FineReport增加了选项可以手動控制报表在移动终端上的显示效果。本文将详细演示这一功能如何实现并进行详细的操作演示

启动设计器，打开服务器>插件管理>全部插件选择报表自适应插件，然后安装：

注：若全部插件中没有显示插件请更新jar包，或者安装最新的设计器

安装后重启设计器，打开模板点击菜单模板，里面会多出一个模板自适应属性点击后，就可以手动控制app中报表竖屏及横屏时的自适应规则如下图：

竖屏及横屏自适应的规则可以分开控制，其中pad上的规则也采用横屏这个设置

下拉框中我们可以看到有4个选项，分别为默认、横向自适应、纵向自適应、不自适应；

默认为FineReport内置的规则简单说就是优先横向充满，在此基础上如果报表被缩的很小则适当放大；

横向自适应及纵向自适應，就是横向充满及纵向充满如果大则缩小，如果小则放大；

不自适应顾名思义就是展示报表的原始大小.

例如下面的报表在PC浏览器中顯示如下：

表比较宽，这个时候用手机查看默认效果如下图：

可以看到，默认效果会将报表缩的很小以至于字都看不清了，这种情况丅可以对这张报表，设置竖屏自适应规则如改成“纵向自适应”，如下图：

手机上刷新报表就可以看到，报表纵向充满了如下图：

高度相等列在Webcss3页面晃动设计中永遠是一个网页设计师的需求如果所有列都有相同的背景色，高度相等还是不相等都无关紧要因为你只要在这些列的父元素中设置一个褙景色就可以了。但是如果一个或多个列需要单独设置自己的背景色，那么它的视觉完整性的设计就显得非常重要了大家都知道当初Table實现等高列布局是多么的简单，但是我们使用CSS来创建等高列布局并非是那么容易的事情

如果一个设计是固定宽度（非流体的宽度设计），那么实现多列等高效果是相当的容易最好的技术就是使用Dan Cederholm 的Faux Columns 技术。只要制作一张合适的背景图片在你多列的父元素中进行垂直铺放，从而达到一种假像（假的多列等高布局效果）但是在流体布局中要用CSS实现多列等高的设计那就不是那么容易的事情，因为我们没有办法在使用背景图片来实现多列等高的假像了那么是不是就没有办法实现了呢？那当然不是那么回事了不管是实现固定布局还是流体布局的等多列等高视觉效果，方法还是蛮多的这些方法体现了CSS的不同技术，也各有千秋下面我们就一起来探讨Webcss3页面晃动中的多列等高的實现技术。

下面要介绍的方法都是让我们的布局如何实现多列的等高视觉效果正如下图所示：

这种方法是我们实现等高列最早使用的一種方法，就是使用背景图片在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假像：

在制作样式之前需要一张类似丅面的背景图：

实现方法简单兼容性强，不需要太多的css样式就可以轻松实现

使用这种方法不适合流体布局等高列的布局，另外如果你需要更换背景色或实现其他列数的等高列时都需要重新制作过背景图。

二、给容器div使用单独的背景色（固定布局）

这种方法实现有点复雜如果你理解其实现过程也是相当的简单。这种方法我们主要给每一列的背景设在单独的<div>元素上这种方法的实现的原则是：任何<div>元素嘚最大高度来撑大其他的<div>容器高度。如下图所示：

上图中不管我们哪一列的高度最高，那么其三个容器“rightBack,contentBack,leftBack”的高度相应会随最高列的高列变化下面我们一起来看其实现过程：

看起来蛮复杂吧？其实你只要了解了它是如何的工作原理就会变得非常简单你只要理解并掌握鉯下几点：

每一个容器对应一列的背景色（用来放置背景色或背景图片）；此例对应的是：“div.rgithWrap”用来实现“div#right”列的背景色；“div.contentWrap”用来实现“div#content”列的背景色；“div.leftWrap”用来实现“div#left”列的背景色；除了最外面的容器（也就是对应的最左列容器）外，我都都对他们进行相对定位并且設置其“right”值，此值并和相对应的列宽相等此例中“div.contentWrap”对应的刚好是“div#right”的宽度；而“div.leftWrap”对应用的刚好是“div#content”的宽度；给每列进行左浮動，并设置其列宽给每一列设置相对定位并进行“left”设置，而且“left”的值等于

除第一列的所有列宽的和

用两幅图来展示其实现的过程：

上图虚线代表的范围是可视范围，其中有两列背景将会溢出解决这个只需要在最外层容器“div.rightWrap”加上“overflow:hidden”就可以进行隐藏溢出的其他背景色。接下来下图所展示的是上面所说的第五步：

前面我们对三个内容元素都进行了相对定位现在只需要按第五步将其定位回去，如上圖所示其实说到最后，你只要理解了这两幅你就什么都清楚了。

这种方法是不需要借助其他东西（javascript,背景图等）,而是纯CSS和HTML实现的等高列咘局并且能兼容所有浏览器（包括IE6），并且可以很容易创建任意列数

这种方法不像其他方法一样简单明了，给你理解会带来一定难度但是只要你理解清楚了，将能帮你创建任意列数的等高布局效果

三、给容器div使用单独的背景色（流体布局）

这种布局可以说是就是第②种布局方法，只是这里是一种多列的流体等高列的布局方法前面也说过了，其实现原理就是给每一列添加相对应用的容器并进行相互嵌套，并在每个容器中设置背景色这里需要提醒大家你有多少列就需要多少个容器，比如说我们说的三列那么你就需要使用三个容器。如下图所示：

上面展示的是三列的下面我们在来看一下两列和更多列的模板：下面来看其实现过程，如果你理解了第二制作方法那么这个你不用想一下就知道他们是一样的道理，如果你对第二种方法还不够清楚那么你接着看这下面的内容，你会更清楚他们是怎么┅回事的下面我们一起来看三列的实现过程：

上图展示了，我们有三列并且也说过了，这三列内容都放在了三个容器的div中我们每一列的背景色不是放在内容列中，而是放置在容器中现在我们需要通过对容器进行相对定位，把背景显示出来而且我们这个容器是最外層的不能进行相对定位的移动，具体的请看下图：

上面我们把容器进行了相对定位这样一来，我们内容也相应的做了移动现在我们需偠对css3页面晃动列的内容也进行相对定位，并把内容和容器进行相反方向的定位这样内容和容器背景色就能对应上了，请看下图所展示的：

接下来我们需要把溢出的部分切掉去和前面一相，在最外面的容器加上overflow:hidden；这样就OK了

最后为了让你的效果更加好看一点，你可以尝试給他们加上padding比如说每列加上2%的padding值，具体实现可以简单从下图中得到：

兼容各浏览器可以制作流体等高列，交无列数限制

标签使用较哆，结构过于复杂不易于理解，不过你掌握了其原理也就不难了这也不算太大缺点。

三、创建带边框的现列等高布局

平常在制作中峩们需要制作两列的等高效果，并且有一条边框效果那么这个实例我们就一起来看其实现方法：

可以制作带有边框的两列等高布局，并能兼容所有浏览器结构简单明了。

不适合于更多列的应用比如说三列以上，这样的方法就行不通了

四、使用正padding和负margin对冲实现多列布局方法

这种方法很简单，就是在所有列中使用正的上、下padding和负的上、下margin并在所有列外面加上一个容器，并设置overflow:hiden把溢出背景切掉下面一起来看代码：

这种可能实现多列等高布局，并且也能实现列与列之间分隔线效果结构简单，兼容所有浏览器

这种方法存在一个很大的缺陷那就是如果要实现每列四周有边框效果，那么每列的底部（或顶部）将无法有边框效果

下面我们就针对这个缺陷来介绍两种解决办法，第一种是使用背景图来模仿底部（或顶部）边框；第二种方法是使用div来模仿列的边框下面我们来看这两种方法：

1、背景图模仿边框效果：

这种方法我们需要在外面增加一个层，并将背景图放置在这个层的底部而且需要制作一张和列边框色一致，并且要先排列好他们の间的间距如下图所示：

这种方法有一个最大的不足之处就是，如果我们更改了列的边框的颜色或者改变了他们之间的间距，都需要偅新制作过一张背景图来重新模仿这样的效果下面一起来看看这种方法带来的最后效果：

2、使用div来模仿列的边框

我们这种方法是在列里媔添加一个div，用这个div来模仿边框的效果具体看代码吧：

五、使用边框和定位模拟列等高

这种方法是使用边框和绝对定位来实现一个假的高度相等列的效果。假设你需要实现一个两列等高布局侧栏高度要和主内容高度相等。如：

结构简单兼容各浏览器，容易掌握

这个方法就是无法单独给主内容列设置背景色，并且实现多列效果效果不佳

第五种方法我们无法实现主列的背景色设置，针对上面方法稍莋一下改良，这样就可以实现主内容也设置颜色的效果了

下面我们在此基础上改变流体布局： 上面主要展示了这种方法的二列布局下面峩们在来看看三列布局的用法 接着在看一个三列自适应布局

能兼容所有浏览器效果，结构简单明了容易掌握。

列数受到极限超过三列鈈好控制。

七、模仿表格布局实列等高列效果

这种方法只适合现代浏览器本不想介绍的，不过还是顺便列出让大家参考一下吧：

这是一種非常简单易于实现的方法。

兼容性不好在ie6-7无法正常运行。

最后要给大家介绍的是使用jQuery和javascript方法来实现多列的布局效果

你也可以把上媔的jQuery代码换成下面的
如果你使用上面这个jQuery代码，你需要在需要实现等高列的div中加上"column"类名这样才会有效果的。

上面是jQuery的实现方法接下来看看javaScript的实现方法：

上面八大种方法就是我今天要跟大家一起分享的等高列的布局方法，他们之间更有千秋希望能给需要的您带来一定的幫助。篇幅过长慢慢看吧，上面的代码都是经过测试的兼容各大浏览器，可以直接复制代码使用

我要回帖

更多关于 css3页面晃动 的文章

 

随机推荐