CSS24. 双列布局 - grid
描述
使用Grid网格布局实现双列布局的要点在于列数为2，且首列的宽度根据需要自行设置，第二列使用片段"fr"属性进行自适应即可。行数不需要指定，每行会根据内容高度进行自适应缩放。HTML/CSS/JavaScript 解法, 执行用时: 1736ms, 内存消耗: 77796KB, 提交时间: 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 border: 1px solid black;\n display:grid;\n grid-template-rows:100px 1fr;\n }\n .left {\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 /><br /><br /><br /><br /><br /><br /><br /></article>\n <article class=\"right\"></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1741ms, 内存消耗: 77820KB, 提交时间: 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: grid;\n grid-template-columns: 100px 1fr;\n }\n .left {\n border: 1px solid black;\n background: red;\n }\n .right{\n background: green;\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 解法, 执行用时: 1747ms, 内存消耗: 77772KB, 提交时间: 2022-01-21
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title> 双列布局 - grid</title>\n</head>\n\n<body>\n <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\n</html>\n<style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .container {\n border: 1px solid black;\n display: grid;\n grid-template-columns: 100px 1fr;\n }\n\n .left {\n border: 1px solid black;\n }\n</style>\n<!-- 描述\n 使用Grid网格布局实现双列布局的要点在于列数为2，且首列的宽度根据需要自行设置，第二列使用片段\"fr\"属性进行自适应即可。行数不需要指定，每行会根据内容高度进行自适应缩放。\n 现在给类名为\"container\"的盒子添加\"display: grid\"属性，使该盒子成为容器。再给该容器添加\"grid-template-columns: 100px 1fr\"属性，表示第一列宽度始终为100px，第二列的宽度为剩余的所有空间。此时可以看到整个容器的高度因为首列的内容被撑开了，并且右边内容区实现了自适应。\n 进入下一节的学习吧。 -->","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1749ms, 内存消耗: 77856KB, 提交时间: 2022-02-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:grid;\n grid-template-columns:100px,1fr;\n border: 1px solid black;\n }\n .left {\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 /><br /><br /><br /><br /><br /><br /><br /></article>\n <article class=\"right\"></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1751ms, 内存消耗: 77808KB, 提交时间: 2022-01-05
{"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:grid;\n grid-template-columns: 100px 1fr;\n }\n .left {\n border: 1px solid black;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\">左盒子</article>\n <article class=\"right\">右盒子</article>\n </section>\n </body>\n</html>","libs":[]}