CSS25. 三列布局 - 浮动
描述
使用浮动实现三列布局的注意点是浮动元素需要写在内容元素之前，否则布局是混乱的。这种方式实现三列布局是优点是简单、兼容性好，但缺点是需要清除浮动，否则父盒子的高度无法撑开，可能会导致其他页面元素的布局混乱。HTML/CSS/JavaScript 解法, 执行用时: 1740ms, 内存消耗: 77800KB, 提交时间: 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 }\n .right {\n border: 1px solid black;\n float: right;\n width: 100px;\n }\n .center{\n margin: 0px 100px;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /></article>\n <article class=\"center\"></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1746ms, 内存消耗: 77788KB, 提交时间: 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 border: 1px solid black;\n float: right;\n width: 100px;\n }\n .center{\n margin: 0 100px;\n background: red;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /></article>\n <article class=\"center\"><br><br><br></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1748ms, 内存消耗: 77800KB, 提交时间: 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 box-sizing: border-box;\n }\n .container {\n overflow:hidden;\n border: 1px solid black;\n }\n .left {\n float:left;width:100px;\n border: 1px solid black;\n }\n .center{\n margin:0px 100px;\n }\n .right {\n float:right;width:100px;\n border: 1px solid black;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /></article>\n <article class=\"center\"></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1748ms, 内存消耗: 77816KB, 提交时间: 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 overflow:hidden;\n \n }\n .left {\n border: 1px solid red;\n float:left;\n width:100px;\n }\n .right {\n border: 1px solid blue;\n float:right;\n width:100px;\n }\n .center{\n margin:0px 100px;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /></article>\n <article class=\"center\"></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1753ms, 内存消耗: 77760KB, 提交时间: 2022-01-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 box-sizing: border-box;\n }\n .container {\n border: 1px solid black;\n overflow: hidden;\n }\n .left {\n float: left;\n width: 100px;\n border: 1px solid black;\n }\n .center {\n margin: 0px 100px\n }\n .right {\n float: right;\n width: 100px;\n border: 1px solid black;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /></article>\n <article class=\"center\"></article>\n </section>\n </body>\n</html>","libs":[]}