CSS4. 浮动
描述
浮动盒子可以向左、右移动,直到它的外边沿接触父级的外边沿或另一个浮动盒子的外边沿。浮动盒子会脱离常规文档流,所以文档流中的元素几乎认为浮动盒子不存在。HTML/CSS/JavaScript 解法, 执行用时: 1740ms, 内存消耗: 77828KB, 提交时间: 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 body{\n width:300px; \n }\n .center{\n width:100px;\n height:100px;\n background:yellow;\n float:left;\n }\n .left{\n width:120px;\n height:120px;\n background:green;\n float:left;\n }\n .right{\n width:100px;\n height:100px;\n background:red;\n float:left;\n }\n </style>\n </head>\n <body>\n \t<div class=\"left\"></div>\n <div class=\"center\"></div>\n <div class=\"right\"></div>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1741ms, 内存消耗: 77812KB, 提交时间: 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 }\n \n body{\n width:300px;\n }\n \n .left{\n width:120px;\n height:120px;\n background-color:red;\n float:left;\n }\n \n .right{\n width:100px;\n height:100px;\n float:left;\n \n background-color:green;\n }\n \n .center{\n width:100px;\n height:100px;\n background-color:yellow;\n float:left;\n }\n </style>\n </head>\n <body>\n \t<div class=\"left\"></div>\n <div class=\"center\"></div>\n <div class=\"right\"></div>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1741ms, 内存消耗: 77996KB, 提交时间: 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 body{\n width:300px;\n }\n .left,.center,.right{\n width:100px;\n height:100px;\n float:left;\n }\n .left{\n background-color:red;\n \n width:120px;\n height:120px;\n }\n .center{\n background-color:orange;\n }\n .right{\n background-color:green;\n }\n </style>\n </head>\n <body>\n \t<div class=\"left\"></div>\n <div class=\"center\"></div>\n <div class=\"right\"></div>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1743ms, 内存消耗: 77796KB, 提交时间: 2022-01-21
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n body{\n width:300px;\n }\n * {\n margin: 0;\n padding: 0;\n }\n .left,.center,.right{\n width:100px;\n height:100px;\n float:left;\n }\n .left{\n width:120px;\n height:120px;\n background:pink;\n }\n .center{\n background:blue;\n }\n .right{\n \n background:yellow;\n }\n </style>\n </head>\n <body>\n \t<div class=\"left\"></div>\n <div class=\"center\"></div>\n <div class=\"right\"></div>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1743ms, 内存消耗: 79716KB, 提交时间: 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 body{\n width:300px;\n \n }\n .left{\n width:120px;\n height:120px;\n background:black;\n float:left;\n }\n .center{\n width:100px;\n height:100px;\n background:pink;\n float:left;\n }\n .right{\n width:100px;\n height:100px;\n background:yellow;\n float:left;\n }\n </style>\n </head>\n <body>\n \t<div class=\"left\"></div>\n <div class=\"center\"></div>\n <div class=\"right\"></div>\n </body>\n</html>","libs":[]}