\u8fd0\u7528css\uff0c\u6709\u56db\u79cd\u65b9\u6cd5\u53ef\u4ee5\u5b9e\u73b0
\n1.float
\n2.flex
\n3.table table-cell
\n4.calc<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>qdabc.cn<\/title>\r\n<\/head>\r\n<style type=\"text\/css\">\r\n\t.container{\r\n\t\twidth: 800px;\r\n\t\theight: 200px;\r\n\t\tborder: 1px solid red;\r\n\t}\r\n\t.left{\r\n\t\twidth: 200px;\r\n\t\theight: 100%;\r\n\t\tbackground-color: gray;\r\n\t}\r\n\t.right{\r\n\t\tbackground-color:#dd00dd;\r\n\t\theight: 100%;\r\n\t}\r\n\r\n\r\n\t.floatleft{\r\n\t\tfloat: left;\r\n\t}\r\n\r\n\t.flex{\r\n\t\tdisplay: flex;\r\n\t}\r\n\r\n\t.flexnone{\r\n\t\tflex: none;\r\n\t}\r\n\r\n\t.flex1{\r\n\t\tflex: 1;\r\n\t}\r\n\r\n\t.table{\r\n\t\tdisplay: table;\r\n\t}\r\n\t.tablecell{\r\n\t\tdisplay: table-cell;\r\n\t}\r\n\t\r\n\t.calleft{\r\n\t\twidth: 200px;\r\n\t\theight: 100%;\r\n\t\tfloat: left;\r\n\t\tbackground: gray;\r\n\t}\r\n\t.calright{\r\n\t\theight:100%;\r\n background-color:red;\r\n float:right;\r\n width:calc(100% - 200px);\r\n\t}\r\n\r\n<\/style>\r\n<body>\r\n\u5229\u7528float\r\n<div class=\"container\">\r\n\t<div class=\"floatleft left\"><\/div>\r\n\t<div class=\"right\"><\/div>\r\n<\/div>\r\n\r\n\u5229\u7528flex\r\n<div class=\"container flex\">\r\n\t<div class=\"left flexnone\"><\/div>\r\n\t<div class=\"right flex1\"><\/div>\r\n<\/div>\r\n\r\n\u5229\u7528table table-cell\r\n<div class=\"container table\">\r\n\t<div class=\"left tablecell\"><\/div>\r\n\t<div class=\"right tablecell\"><\/div>\r\n<\/div>\r\n\r\n\u5229\u7528calc\r\n<div class=\"container\">\r\n\t<div class=\"calleft\"><\/div>\r\n\t<div class=\"calright\"><\/div>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » css \u5b9e\u73b0\u4e00\u4e2adiv\u5de6\u8fb9200px*200px \u53e6\u4e00\u4e2adiv\u81ea\u9002\u5e94\u5728\u53f3\u4fa7<\/a><\/p>","protected":false},"excerpt":{"rendered":"\u8fd0\u7528css\uff0c\u6709\u56db\u79cd\u65b9\u6cd5\u53ef\u4ee5\u5b9e\u73b0 1.float 2.flex 3.table table-cell 4.calc <!DOCTYPE html> <html> <head […]<\/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,65,29],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2281"}],"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=2281"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2281\/revisions"}],"predecessor-version":[{"id":2282,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2281\/revisions\/2282"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2281"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}