CSS22. 双列布局 - 绝对定位
描述
通过绝对定位实现的双列布局看起来会比较僵硬，因为父盒子首先需要设置定位属性并且父盒子的高度无法被子盒子撑开，如果子盒子的高度是自适应的，那么父盒子的高度也就无法确定从而设置了，但优点是设置属性比浮动来得更直观。HTML/CSS/JavaScript 解法, 执行用时: 1737ms, 内存消耗: 77808KB, 提交时间: 2022-01-24
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n .container {\n position: relative;\n \n }\n .left {\n border: 1px solid black;\n position: absolute;\n left: 0;\n width: 100px;\n }\n .right {\n border: 1px solid black;\n position: absolute;\n left: 100px;\n right: 0;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1738ms, 内存消耗: 77780KB, 提交时间: 2021-12-30
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n .container{\n position: relative; \n }\n .left {\n border: 1px solid black;\n position: absolute;\n left: 0px;\n width: 100px;\n background: red;\n }\n .right {\n border: 1px solid black;\n position: absolute;\n background: green;\n left: 100px;\n right: 0px;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1746ms, 内存消耗: 77772KB, 提交时间: 2022-01-22
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n .container{\n position:relative;\n }\n .left {\n position:absolute;\n left:0;\n width:100px;\n border: 1px solid black;\n }\n .right {\n position:absolute;\n left:100px;\n right:0;\n border: 1px solid black;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1748ms, 内存消耗: 77772KB, 提交时间: 2022-01-23
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n .left {\n border: 1px solid black;\n position: absolute;\n left: 0;\n width: 100px\n }\n .right {\n border: 1px solid black;\n position: absolute;\n left: 100px;\n right: 0px;\n }\n .container{\n position: relative;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1749ms, 内存消耗: 77824KB, 提交时间: 2022-01-23
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n .container {\n position:relative;\n }\n .left {\n border: 1px solid black;\n position:absolute;\n left:0;\n width:100px;\n }\n .right {\n border: 1px solid black;\n position:absolute;\n left:100px;\n right:0;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}