{"id":1624,"date":"2017-03-22T15:38:26","date_gmt":"2017-03-22T07:38:26","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=1624"},"modified":"2017-03-22T15:39:00","modified_gmt":"2017-03-22T07:39:00","slug":"%e5%b8%83%e5%b1%80%e8%87%aa%e9%80%82%e5%ba%94%e4%b8%80%e4%be%a7%e5%ae%9a%e5%ae%bd","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=1624","title":{"rendered":"\u5e03\u5c40\u81ea\u9002\u5e94\u4e00\u4fa7\u5b9a\u5bbd"},"content":{"rendered":"

\u4e0d\u4f7f\u7528float\u5b9e\u73b0\u4e24\u8fb9\u56fa\u5b9a\uff0c\u4e2d\u95f4\u81ea\u52a8\u6269\u5c55\u7684\u5e03\u5c40<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head lang=\"en\">\r\n    <meta charset=\"UTF-8\">\r\n    <title>\u4e0d\u4f7f\u7528float\u5b9e\u73b0\u4e24\u8fb9\u56fa\u5b9a\uff0c\u4e2d\u95f4\u81ea\u52a8\u6269\u5c55\u7684\u5e03\u5c40<\/title>\r\n    <style>\r\n        .header{height:200px;background-color:red}\r\n        .main{position:relative;zoom:1;}\r\n        .main-left{position:absolute;left:0;top:0;width:300px;height:500px;background-color: yellow}\r\n        .main-right{position:absolute;right:0;top:0;width:300px;height:500px;background-color: green}\r\n        .main-center{height:500px;margin:0 300px;background-color: #aaaaaa}\r\n        .footer{height:100px;background-color: #dddddd}\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"header\"><\/div>\r\n    <div class=\"main\">\r\n        <div class=\"main-left\">\u6211\u662f\u5de6\u4fa7\u6211\u662f\u5de6\u4fa7\u6211\u662f\u5de6\u4fa7\u6211\u662f\u5de6\u4fa7\u6211\u662f\u5de6\u4fa7\u6211\u662f\u5de6\u4fa7<\/div>\r\n        <div class=\"main-center\">\u6211\u662f\u4e2d\u95f4\u6211\u662f\u4e2d\u95f4\u6211\u662f\u4e2d\u95f4\u6211\u662f\u4e2d\u95f4\u6211\u662f\u4e2d\u95f4\u6211\u662f\u4e2d\u95f4<\/div>\r\n        <div class=\"main-right\">\u6211\u662f\u53f3\u4fa7\u6211\u662f\u53f3\u4fa7\u6211\u662f\u53f3\u4fa7\u6211\u662f\u53f3\u4fa7\u6211\u662f\u53f3\u4fa7\u6211\u662f\u53f3\u4fa7<\/div>\r\n    <\/div>\r\n    <div class=\"footer\"><\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
\u8d1f\u8fb9\u8ddd\u7684”\u5de6\u8fb9\u56fa\u5b9a\u5bbd\uff0c\u53f3\u8fb9\u81ea\u9002\u5e94\u5bbd”\u3002<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n*{margin:0px;padding:0px;}\r\n#head{\r\n\tmin-height:50px;\r\n\twidth:100%;\r\n\tbackground-color: yellow;\r\n}\r\n#container {\r\n\twidth:100%;\r\n\tfloat:right;\r\n\tmargin-left:-200px;\r\n}\r\n#left{\r\n\twidth:200px;\r\n\theight:200px;\r\n\tfloat:left;\r\n\tbackground-color: cyan;\r\n}\r\n#right{\r\n\theight:200px;\r\n\tmargin-left:200px;\r\n\tbackground-color: red;\r\n}\r\n#right div{\r\n\twidth:300px;\r\n\tbackground-color: green;\r\n\tclear:both;\r\n}\r\n\r\n#footer{\r\n\tmin-height:50px;\r\n\twidth:100%;\r\n\tbackground-color: blue;\r\n\tclear: both;\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"head\"><h1>Header<\/h1><\/div>\r\n\r\n<div id=\"left\"><h1>Left Sidebar<\/h1><\/div>\r\n<div id=\"container\">\r\n\t<div id=\"right\"><div><h1>Content<\/h1><\/div><\/div>\r\n<\/div>\r\n\r\n<div id=\"footer\"><h1>Footer<\/h1><\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n\r\n<\/pre>\n
CSS3\u4e2d\u7684box-flex\u00a0\u00a0\u4e00\u4fa7\u5b9a\u5bbd \u81ea\u9002\u5e94<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\t<head>\r\n\t\t<meta charset=\"utf-8\">\r\n\t\t<title>box<\/title>\r\n\t\t<style type=\"text\/css\">\r\n\t\t\tbody,div{\r\n\t\t\t\tmargin: 0;\r\n\t\t\t\tpadding: 0;\r\n\t\t\t}\r\n\t\t\t.box{\r\n\t\t\t\tbackground-color: green;\r\n\t\t\t\tdisplay: -moz-box;\r\n\t\t\t\tdisplay: -webkit-box;\r\n\t\t\t\tdisplay: box;\r\n\t\t\t\twidth: 100%;\r\n\t\t\t}\r\n\t\t\t.item:first-child{\r\n\t\t\t\twidth: 200px;\r\n\t\t\t\theight: 80px;\r\n\t\t\t\tmargin:10px;\r\n\t\t\t\tbackground-color: yellow;\r\n\t\t\t}\r\n\t\t\t.item:nth-child(2){\r\n\t\t\t\tbackground-color: red;\r\n\t\t\t\theight: 80px;\r\n\t\t\t\t-moz-box-flex: 1;\r\n\t\t\t\t-webkit-box-flex: 1;\r\n\t\t\t\tbox-flex: 1;\r\n\t\t\t\tmargin: 10px 0;\r\n\t\t\t}\r\n\t\t\t.item:last-child{\r\n\t\t\t\tbackground-color: orange;\r\n\t\t\t\theight: 80px;\r\n\t\t\t\t-moz-box-flex: 1;\r\n\t\t\t\t-webkit-box-flex: 1;\r\n\t\t\t\tbox-flex: 1;\r\n\t\t\t\tmargin:10px;\r\n\t\t\t}\r\n\t\t\t\/*\u8fd9\u91cc\u8c8c\u4f3c\u5982\u679c.box\u8bbe\u7f6e\u4e86\u5de6\u53f3padding\uff0c\u5206\u914d\u5bbd\u5ea6\u7684\u65f6\u5019\u4e0d\u4f1a\u51cf\u6389\u5de6\u53f3padding\u7684\u90e8\u5206\uff0c\u76f8\u5f53\u4e8e\u5ffd\u7565\u4e86padding\u6548\u679c*\/\r\n\t\t<\/style>\r\n\t<\/head>\r\n\r\n\t<body>\r\n\t\t<div class=\"box\">\r\n\t\t\t<div class=\"item\">column 1<\/div>\r\n\t\t\t<div class=\"item\">column 2<\/div>\r\n\t\t\t<div class=\"item\">column 3<\/div>\r\n\t\t<\/div>\r\n\t<\/body>\r\n<\/html><\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » \u5e03\u5c40\u81ea\u9002\u5e94\u4e00\u4fa7\u5b9a\u5bbd<\/a><\/p>","protected":false},"excerpt":{"rendered":"
\u4e0d\u4f7f\u7528float\u5b9e\u73b0\u4e24\u8fb9\u56fa\u5b9a\uff0c\u4e2d\u95f4\u81ea\u52a8\u6269\u5c55\u7684\u5e03\u5c40 <!DOCTYPE html> <html> <head lang=”en”> <meta charset= […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[28,12,29],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1624"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1624"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1624\/revisions"}],"predecessor-version":[{"id":1625,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1624\/revisions\/1625"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1624"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}