自适应页面的方形元素

摘要

有时我们会遇到这样的需求,制作一个自适应页面的方形元素,这时我们就要借助百分比进行布局了。如果我们在布局的过程中不做处理采用常规的布局,往往得到的结果并不是我们想要的。原因在于:高度的百分比是相对于父级的高进行计算的。

我们在制作网页的过程中,很多时候为了某些特定需求需要借助百分比进行宽、高布局。用过百分比的人都知道,设置百分比的元素是相对于父级进行计算的。所以,我们在使用百分比设置宽、高的过程中要注意其父级宽和高的设置。

有时我们会遇到这样的需求,制作一个自适应页面的方形元素,这时我们就要借助百分比进行布局了。如果我们在布局的过程中不做处理采用常规的布局,往往得到的结果并不是我们想要的。原因在于:高度的百分比是相对于父级的高进行计算的。

为了实现自适应页面的方形元素,很多朋友可能会借助JS来解决。对于这种解决方案,笔者也是认同的。

今天,笔者介绍一种更为巧妙的布局方式,仅仅借助CSS(CSS黑科技)就能让百分比的值达到统一。

  1. E {
  2.     position: relative;
  3.     width: 100%;
  4.     height: 0;
  5.     padding-top: 100%;
  6. }
  7. E F {
  8.     position: absolute;
  9.     left: 0;
  10.     top: 0;
  11.     width: 100%;
  12.     height: 100%;
  13. }

看到这样的代码,有些人可能有点不解。为什么我们要设置E元素的height为0,而给padding-top百分百呢?

原因是这样的:padding的百分比是相对于父级的宽来设置的,通过这种方式,我们便达到了宽和高的统一。这时,我们只要把需要的元素定位到父元素上就好了。

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: