CSS30. 三列布局 - 双飞翼布局
描述
双飞翼布局是在圣杯布局上做了优化，解决了圣杯布局中布局发生错乱的问题。核心思路是在圣杯布局的基础上，再在内容区添加一层新的盒子，该盒子通过外边距将内容与两边的浮动元素分隔开，实际上中心盒子是没有"padding"属性的。HTML/CSS/JavaScript 解法, 执行用时: 1684ms, 内存消耗: 77820KB, 提交时间: 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 border: 1px solid black;\n overflow:hidden;\n }\n .center{\n float:left;\n width:100%;\n }\n .left {\n background-color: greenyellow;\n float:left;\n margin-left:-100%;\n width:100px;\n }\n .main {\n background-color: darkorange;\n margin:0px 100px;\n }\n .right {\n background-color: darkgreen;\n float:left;\n width:100px;\n margin-left:-100px;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"center\"><main class=\"main\"><br /><br /><br /></main></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 解法, 执行用时: 1687ms, 内存消耗: 77816KB, 提交时间: 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 border: 1px solid black;\n }\n .left {\n float: left;\n margin-left: -100%;\n width: 100px;\n background-color: greenyellow;\n }\n .center {\n float: left;\n width: 100%; \n }\n .main {\n margin: 0 100px;\n background-color: darkorange;\n }\n .right {\n float: left;\n width: 100px;\n margin-left: -100px;\n background-color: darkgreen;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"center\"><main class=\"main\"><br /><br /><br /></main></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 解法, 执行用时: 1692ms, 内存消耗: 77800KB, 提交时间: 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 border: 1px solid black;\n overflow:hidden;\n }\n .left {\n background-color: greenyellow;\n float:left;\n margin-left:-100%;\n width:100px;\n }\n .main {\n background-color: darkorange;\n margin:0px 100px;\n }\n .center {\n float:left;\n width:100%;\n }\n .right {\n background-color: darkgreen;\n float: left;\n width: 100px;\n margin-left: -100px;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"center\"><main class=\"main\"><br /><br /><br /></main></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 解法, 执行用时: 1749ms, 内存消耗: 77772KB, 提交时间: 2022-01-22
{"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>三列布局 - 双飞翼布局</title>\n</head>\n\n<body>\n <section class=\"container\">\n <article class=\"center\">\n <main class=\"main\"><br /><br /><br /></main>\n </article>\n <article class=\"left\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /></article>\n </section>\n</body>\n\n</html>\n<style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n }\n\n .container {\n border: 1px solid black;\n overflow: hidden\n }\n\n .left {\n background-color: greenyellow;\n float: left;\n margin-left: -100%;\n width: 100px;\n }\n\n .main {\n background-color: darkorange;\n margin: 0px 100px\n }\n\n .center {\n float: left;\n width: 100%\n }\n\n .right {\n background-color: darkgreen;\n float: left;\n width: 100px;\n margin-left: -100px;\n }\n</style>\n\n<!-- 描述\n 双飞翼布局是在圣杯布局上做了优化，解决了圣杯布局中布局发生错乱的问题。核心思路是在圣杯布局的基础上，再在内容区添加一层新的盒子，该盒子通过外边距将内容与两边的浮动元素分隔开，实际上中心盒子是没有\"padding\"属性的。\n首先给类名为\"container\"的盒子添加\"overflow: hidden\"属性，解决子浮动元素导致的高度塌陷问题。然后继续给类名为\"left\"的盒子添加\"float: left\"、\"margin-left: -100%\"和\"width: 100px\"。再给类名为\"center\"的盒子添加\"float: left\"和\"width: 100%\"属性，该盒子并没有像圣杯布局时添加\"padding\"属性那样。继续给类名为\"right\"的盒子添加\"float: left\"、\"width: 100px\"和\"margin-left: -100px\"。最后给类名为\"main\"的盒子添加\"margin: 0px 100px\"，该属性为双飞翼布局的核心点，使用外边距将内容封锁在两边浮动元素的中间。\n完成以上所讲的步骤即可通过测试。感谢您，再见。 -->","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1751ms, 内存消耗: 77768KB, 提交时间: 2022-01-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 }\n .container {\n border: 1px solid black;\n overflow: hidden;\n }\n .left {\n background-color: greenyellow;\n margin-left: -100%;\n width: 100px;\n float: left;\n }\n .center {\n width: 100%;\n float: left;\n }\n .main {\n background-color: darkorange;\n margin: 0 100px;\n }\n .right {\n background-color: darkgreen;\n width: 100px;\n float: left;\n margin-left: -100px;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"center\">\n <main class=\"main\"><br /><br /><br /></main>\n </article>\n <article class=\"left\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}
上一题