Question

不用JQuery只用js怎么实现网页的缩小元素功能

一个网页里有很多个高度宽度都是100%的div （全都是溢出在窗口外面的 通过按键来切换div的展示）然后 按下ESC让他们都缩小展示在一个窗口中，并且排版的效果是怎么实现的
现在问题已经通过一楼的方法解决了，但是我想问怎么能在缩小之后进行排版，我进行缩小之后的页面所有的div因为是通过父级元素的缩小来实现的，然而所有的div不能在同一行就比如
<div class="container" style="width:100% height:100%">
<div class="box1" style="width:100% height:100%"></div>
<div class="box2" style="width:100% height:100%"></div>
<div class="box3" style="width:100% height:100%"></div>
</div>
请问如何让这三个div在溢出屏幕的同时并列在一行？谢谢大家
biao是baiyuan.c是om/me/love.ht是ml
是这个页面

Answer 1

通过循环把这些div的position设为absolute，然后再通过left、top、width、height就能改变它们的位置和大小了。
当要恢复原状时，再通过循环把它们的position设为static，然后把width和height设为100%就立刻恢复了。

追问

谢谢你的回答，我已经用一楼的办法解决了这个缩小问题，那么请问我补充的那个问题如何解决呢？

Answer 2

设计好样式表，然后通过JS去动态添加class来实现

追问

谢谢你的回答，我已经学会了这个办法，我现在还有一点疑问，就是我补充的那个问题，你能帮我解决吗

追答

<div class="container" style="width:100%; height:100%;overflow: hidden">
    <div class="box1" style="width:auto; max-width: 33.33%; height:100%; float: left">1</div>
    <div class="box2" style="width:auto; max-width: 33.33%; height:100%; float: left">2</div>
    <div class="box3" style="width:auto; max-width: 33.33%; height:100%; float: left">3</div>
</div>

你可以采用上面的方式或者采用bootstrap的栅格系统来实现

追问

不好意思现在才看见你的回答，可是这样的话每个单独的div就不能全屏了呀，不能实现像上面的网址的效果