CSS21. 双列布局 - 浮动
描述
自适应的双列布局利用浮动、外边和触发父级BFC即可实现，这种方法主要是因为BFC的高度计算会包含其内的浮动元素的高度，父盒子会被撑开。HTML/CSS/JavaScript 解法, 执行用时: 1745ms, 内存消耗: 77772KB, 提交时间: 2022-01-26
{"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 overflow:hidden;\n }\n .left {\n border: 1px solid black;\n float:left;\n width:100px;\n }\n .right{\n margin-left: 100px\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 解法, 执行用时: 1745ms, 内存消耗: 77824KB, 提交时间: 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 overflow: hidden;\n }\n .left {\n border: 1px solid black;\n float: left;\n width: 100px;\n }\n .right{\n \n margin-left:100px;\n \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 解法, 执行用时: 1745ms, 内存消耗: 77880KB, 提交时间: 2022-01-26
{"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 overflow:hidden;\n }\n .left {\n border: 1px solid black;\n float:left;\n width:100px;\n }\n .right {\n margin-left:100px;\n \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 解法, 执行用时: 1746ms, 内存消耗: 77876KB, 提交时间: 2022-01-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 overflow:hidden;\n }\n .left {\n border: 1px solid black;\n float:left;\n width:100px;\n }\n .right{\n margin-left:100px;\n background-color:red;\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 解法, 执行用时: 1748ms, 内存消耗: 77772KB, 提交时间: 2022-01-25
{"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 overflow: hidden;\n }\n .left {\n border: 1px solid black;\n float: left;\n width: 100px;\n }\n .right{\n margin-left: 100px\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":[]}