Created
February 4, 2018 16:57
-
-
Save NoahSun/8ff343b1e6233d6ccb5a08158fe635e6 to your computer and use it in GitHub Desktop.
使用 双position: absolute; 实现双栏布局
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .a,.b{ | |
| position: absolute; | |
| color: white; | |
| height: 100%; | |
| overflow-y: auto; | |
| } | |
| .a{ | |
| width: 200px; | |
| background: red; | |
| } | |
| .b{ | |
| left: 200px; | |
| right: 0; | |
| background: blue; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- | |
| 小弟不才，面试某金服外包时被提出一个问题，使用定位布局来实现双栏布局。我回答，使用双div的绝对定位。 | |
| 面试官说这个思想很惊奇，最后被被鄙视为瞎想的。 | |
| --> | |
| <div class="a">a div</div> | |
| <div class="b">b div</div> | |
| <script> | |
| var a = document.querySelector('.a'); | |
| var b = document.querySelector('.b'); | |
| var context = '<p>双position: absolute; 的双栏布局</p>' | |
| for(let i = 0; i < 100; i++){ | |
| a.innerHTML += context; | |
| b.innerHTML += context; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment