CSS29. 三列布局 - 圣杯布局
描述
不像Flexbox或Grid布局可以控制元素显示的次序，圣杯布局是通过浮动元素和外边距属性实现三列布局，但最重要的一点是，在文档中需要将优先渲染的内容写在最前方，但显示时看起来却好像是按照显示次序书写的一样。HTML/CSS/JavaScript 解法, 执行用时: 1688ms, 内存消耗: 77820KB, 提交时间: 2022-02-09
{"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 }\n .container {\n overflow: hidden;\n padding: 0 100px;\n min-width: 100px;\n border: 1px solid black;\n }\n .left {\n float: left;\n width: 100px;\n height: 50px;\n margin-left: -100%;\n position: relative;\n left: -100px;\n background-color: greenyellow;\n }\n .center {\n float: left;\n width: 100%;\n background-color: darkorange;\n }\n .right {\n float: left;\n width: 100px;\n height: 100px;\n margin-left: -100px;\n position: relative;\n left: 100px;\n background-color: darkgreen;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"center\"><br />center<br /><br /></article>\n <article class=\"left\"><br />left<br /><br /></article>\n <article class=\"right\"><br />right<br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1693ms, 内存消耗: 77812KB, 提交时间: 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 }\n .container {\n overflow: hidden;\n padding: 0 100px;\n min-width: 100px;\n border: 1px solid black;\n }\n .left {\n float: left;\n width: 100px;\n margin-left: -100%;\n position: relative;\n left: -100px;\n background-color: greenyellow;\n }\n .center {\n float: left;\n width: 100%;\n background-color: darkorange;\n }\n .right {\n float: left;\n width: 100px;\n margin-left: -100px;\n position: relative;\n left: 100px;\n background-color: darkgreen;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"center\"><br /><br /><br /></article>\n <article class=\"left\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1744ms, 内存消耗: 77796KB, 提交时间: 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 }\n .container {\n overflow:hidden;\n padding:0 100px;\n min-width: 100px;\n border: 1px solid black;\n }\n .left {\n float:left;\n width:100px;\n margin-left:-100%;\n position:relative;\n left:-100px;\n background-color: greenyellow;\n }\n .center {\n float:left;\n width:100%;\n background-color: darkorange;\n }\n .right {\n float:left;\n width:100px;\n margin-left:-100px;\n position:relative;\n left:100px;\n \n background-color: darkgreen;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"center\"><br /><br /><br /></article>\n <article class=\"left\"><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-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 }\n .container {\n border: 1px solid black;\n overflow:hidden;\n padding:0px 100px;\n min-width:100px;\n }\n .left {\n background-color: greenyellow;\n float:left;\n width:100px;\n margin-left:-100%;\n position:relative;\n left:-100px;\n }\n .center {\n background-color: darkorange;\n float:left;\n width:100%;\n }\n .right {\n background-color: darkgreen;\n float:left;\n width:100px;\n margin-left:-100px;\n position:relative;\n left:100px;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"center\">11<br /><br /><br /></article>\n <article class=\"left\">22<br /><br /><br /></article>\n <article class=\"right\">33<br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1747ms, 内存消耗: 77784KB, 提交时间: 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 }\n .container {\n border: 1px solid black;\n overflow: hidden;\n padding: 0px 100px;\n min-width: 100px;\n }\n .left {\n background-color: greenyellow;\n float: left;\n width: 100px;\n margin-left: -100%;\n position: relative;\n left:-100px;\n }\n .center {\n background-color: darkorange;\n float:left;\n width:100%; \n }\n .right {\n background-color: darkgreen;\n float: left;\n width: 100px;\n margin-left:-100px;\n position: relative;\n left:100px;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"center\"><br /><br /><br /></article>\n <article class=\"left\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}