CSS26. 三列布局 - 绝对定位
描述
使用绝对定位实现三列布局，实际上是和之前使用绝对定位实现双列布局同一个原理。主要思路是，两边通过绝对定位定位到父盒子的左、右边框上，再根据实际的需要设置两边盒子的宽度，高度是根据内容自适应的。中间内容区通过定位属性左、右自适应宽度。HTML/CSS/JavaScript 解法, 执行用时: 1688ms, 内存消耗: 77808KB, 提交时间: 2022-02-08
{"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 .center {\n border: 1px solid black;\n position:absolute;\n left:100px;\n right:100px;\n }\n .right {\n border: 1px solid black;\n position:absolute;\n right:0;\n width:100px\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /></article>\n <article class=\"center\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1692ms, 内存消耗: 77772KB, 提交时间: 2022-02-07
{"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: 0px;\n width: 100px;\n border: 1px solid black;\n }\n .center {\n position:absolute;\n left: 100px;\n right: 100px;\n border: 1px solid black;\n }\n .right {\n position: absolute;\n width: 100px;\n right: 0px;\n border: 1px solid black;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /></article>\n <article class=\"center\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1741ms, 内存消耗: 77864KB, 提交时间: 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 .left {\n border: 1px solid black;\n position:absolute;\n left:0px;\n width:100px;\n }\n .center {\n border: 1px solid red;\n position:absolute;\n left:100px;\n right:100px;\n }\n .right {\n border: 1px solid blue;\n position:absolute;\n right:0;\n width:100px;\n }\n .container{\n position:relative;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /></article>\n <article class=\"center\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1744ms, 内存消耗: 77828KB, 提交时间: 2021-12-31
{"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 .center {\n border: 1px solid black;\n position:absolute;\n left:100px;\n right:100px;\n width:100px;\n }\n .right {\n border: 1px solid black;\n position:absolute;\n right:0;\n width:100px;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /></article>\n <article class=\"center\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1748ms, 内存消耗: 77756KB, 提交时间: 2022-01-27
{"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: 0px;\n width: 100px;\n }\n .center {\n border: 1px solid black;\n \n position: absolute;\n left: 100px;\n right: 100px;\n }\n .right {\n border: 1px solid black;\n position: absolute;\n right: 0px;\n width: 100px;\n }\n .container{\n position: relative;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /></article>\n <article class=\"center\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}