CSS23. 双列布局 - flex
描述
通过Flexbox可以快速实现双列布局，主要通过"flex: 1"这条弹性项属性给内容区申请到父盒子的所有剩余空间，并且可以给弹性项设置"position"属性调整弹性项内部的子盒子细节。HTML/CSS/JavaScript 解法, 执行用时: 1748ms, 内存消耗: 77828KB, 提交时间: 2021-12-21
{"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 border: 1px solid black;\n display: flex;\n }\n .left {\n border: 1px solid black;\n width:100px;\n }\n .right {\n border: 1px solid greenyellow;\n flex:1;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>\n <article class=\"right\"></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1750ms, 内存消耗: 77772KB, 提交时间: 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 border: 1px solid black;\n display:flex;\n \n }\n .left {\n border: 1px solid black;\n width:100px\n }\n .right {\n border: 1px solid greenyellow;\n flex:1\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>\n <article class=\"right\"></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1751ms, 内存消耗: 77772KB, 提交时间: 2022-02-02
{"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 border: 1px solid black;\n display:flex; \n }\n .left {\n border: 1px solid black;\n width:100px;\n }\n .right {\n flex:1;\n border: 1px solid greenyellow;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>\n <article class=\"right\"></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1753ms, 内存消耗: 77772KB, 提交时间: 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 .container {\n border: 1px solid black;\n }\n .left {\n border: 1px solid black;\n }\n .right {\n border: 1px solid greenyellow;\n }.container {\n border: 1px solid black;\n display: flex;\n}\n.left {\n border: 1px solid black;\n width:100px;\n}\n.right {\n border: 1px solid greenyellow;\n flex:1;\n}\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>\n <article class=\"right\"></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1753ms, 内存消耗: 77800KB, 提交时间: 2021-12-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 display: flex;\n border: 1px solid black;\n }\n .left {\n width: 100px;\n border: 1px solid black;\n }\n .right {\n flex: 1;\n border: 1px solid greenyellow;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>\n <article class=\"right\"></article>\n </section>\n </body>\n</html>","libs":[]}