调整窗口大小时如何将div置于内容之下?

时间:2013-08-09 18:36:55

标签: javascript css html collapse

让我们说我有简单的带有标题的html(+ css)页面,下面两个div(左和右)以及它们下方的页脚。调整大小窗口时,我想让右边的div进入左下角。 我有两个这种效果的例子:

EXAMPLE #1 - 这是一个简单的例子,但它是我想到的100%,这里是另一个,更复杂但也很好: EXAMPLE #2

这个效果怎么称呼?我需要JavaScript吗?

2 个答案:

答案 0 :(得分:2)

此效果称为响应式网页设计,它使用媒体查询来定位特定的设备大小。

您可以通过观看这些介绍视频了解有关如何使用和处理媒体查询的更多信息:

https://www.youtube.com/watch?v=TPmb7xHCLO0

https://www.youtube.com/watch?v=F_fhyXUH_To

此外,这篇文章可以为您节省大量时间和挫折:

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

答案 1 :(得分:2)

Twitter为响应式HTML设计制作了这个非常棒的框架:http://getbootstrap.com/ 它使用起来非常简单,并且可以节省大量的工作。