{"id":57,"date":"2011-10-16T16:52:02","date_gmt":"2011-10-16T08:52:02","guid":{"rendered":"https:\/\/blog.indeex.club\/?p=57"},"modified":"2020-06-20T22:38:10","modified_gmt":"2020-06-20T14:38:10","slug":"css%e5%b8%83%e5%b1%80%e6%95%b4%e7%90%86","status":"publish","type":"post","link":"https:\/\/blog.indeex.club\/index.php\/2011\/10\/16\/css%e5%b8%83%e5%b1%80%e6%95%b4%e7%90%86\/","title":{"rendered":"CSS\u5e03\u5c40\u6574\u7406"},"content":{"rendered":"

\u5355\u884c\u4e00\u5217<\/h3>\n

\u4ee5\u4e0b\u662f\u5f15\u7528\u7247\u6bb5\uff1a<\/p>\n

body { margin: 0px; padding: 0px; text-align: center; }   \n\n#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } \n<\/code><\/pre>\n
\u4e24\u884c\u4e00\u5217<\/h3>\n
\u4ee5\u4e0b\u662f\u5f15\u7528\u7247\u6bb5\uff1a<\/p>\n
body { margin: 0px; padding: 0px; text-align: center;}   \n\n#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}   \n\n#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;} \n<\/code><\/pre>\n
\u4e09\u884c\u4e00\u5217<\/p>\n
\u4ee5\u4e0b\u662f\u5f15\u7528\u7247\u6bb5\uff1a<\/p>\n
body { margin: 0px; padding: 0px; text-align: center; }<\/p>\n
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }<\/p>\n
#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }<\/p>\n
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }<\/p>\n
\u5355\u884c\u4e24\u5217<\/h3>\n
\u4ee5\u4e0b\u662f\u5f15\u7528\u7247\u6bb5\uff1a<\/p>\n
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }   \n\n#bodycenter #dv1 {float: left;width: 280px;}   \n\n#bodycenter #dv2 {float: right;width: 410px;}  \n<\/code><\/pre>\n
\u4e24\u884c\u4e24\u5217<\/h3>\n
\u4ee5\u4e0b\u662f\u5f15\u7528\u7247\u6bb5\uff1a<\/p>\n
#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}   \n\n#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }   \n\n#bodycenter #dv1 { float: left; width: 280px;}   \n\n#bodycenter #dv2 { float: right;width: 410px;} \n<\/code><\/pre>\n
\u4e09\u884c\u4e24\u5217<\/h3>\n
\u4ee5\u4e0b\u662f\u5f15\u7528\u7247\u6bb5\uff1a<\/p>\n
#header{ width: 700px;margin-right: auto; margin-left: auto; }   \n\n#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }   \n\n#bodycenter #dv1 { float: left;width: 280px;}   \n\n#bodycenter #dv2 { float: right; width: 410px;}   \n\n#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }  \n<\/code><\/pre>\n
\u5355\u884c\u4e09\u5217<\/h3>\n
\u7edd\u5bf9\u5b9a\u4f4d<\/h4>\n
\u4ee5\u4e0b\u662f\u5f15\u7528\u7247\u6bb5\uff1a<\/p>\n
#left { position: absolute; top: 0px; left: 0px; width: 120px; }   \n\n#middle {margin: 20px 190px 20px 190px; }   \n\n#right {position: absolute;top: 0px; right: 0px; width: 120px;}  \n<\/code><\/pre>\n
float\u5b9a\u4f4d\u4e00<\/h4>\n
xhtml:<\/p>\n
\u4ee5\u4e0b\u662f\u5f15\u7528\u7247\u6bb5\uff1a<\/p>\n
<div id=\"warp\">   \n\n<div id=\"column\">   \n\n<div id=\"column1\">\u8fd9\u91cc\u662f\u7b2c\u4e00\u5217<\/div>   \n\n<div id=\"column2\">\u8fd9\u91cc\u662f\u7b2c\u4e8c\u5217<\/div>   \n\n<div class=\"clear\"><\/div>   \n\n<\/div>   \n\n<div id=\"column3\">\u8fd9\u91cc\u662f\u7b2c\u4e09\u5217<\/div>   \n\n<div class=\"clear\"><\/div>   \n\n<\/div>  \n<\/code><\/pre>\n
CSS:<\/p>\n
\u4ee5\u4e0b\u662f\u5f15\u7528\u7247\u6bb5\uff1a<\/p>\n
#wrap{ width:100%; height:auto;}   \n\n#column{ float:left; width:60%;}   \n\n#column1{ float:left; width:30%;}   \n\n#column2{ float:right; width:30%;}   \n\n#column3{ float:right; width:40%;}   \n\n.clear{ clear:both;}  \n<\/code><\/pre>\n
float\u5b9a\u4f4d\u4e8c<\/h4>\n
xhtml:<\/p>\n
\u4ee5\u4e0b\u662f\u5f15\u7528\u7247\u6bb5\uff1a<\/p>\n
<div id=\"center\" class=\"column\">   \n\n<h1>This is the main content.<\/h1>   \n\n<\/div>   \n\n<div id=\"left\" class=\"column\">   \n\n<h2>This is the left sidebar.<\/h2>   \n\n<\/div>   \n\n<div id=\"right\" class=\"column\">   \n\n<h2>This is the right sidebar.<\/h2>   \n\n<\/div>  \n<\/code><\/pre>\n
CSS:<\/p>\n
\u4ee5\u4e0b\u662f\u5f15\u7528\u7247\u6bb5\uff1a<\/p>\n
body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}   \n\n.column {position: relative;float: left;}   \n\n#center {width: 100%;}   \n\n#left {width: 180px; right: 240px;margin-left: -100%;}   \n\n#right {width: 130px;margin-right: -100%;}  \n<\/code><\/pre>\n
\u4e24\u884c\u4e09\u5217<\/h3>\n
xhtml:<\/p>\n
\u4ee5\u4e0b\u662f\u5f15\u7528\u7247\u6bb5\uff1a<\/p>\n
<div id=\"header\">\u8fd9\u91cc\u662f\u9876\u884c<\/div>   \n\n<div id=\"warp\">   \n\n<div id=\"column\">   \n\n<div id=\"column1\">\u8fd9\u91cc\u662f\u7b2c\u4e00\u5217<\/div>   \n\n<div id=\"column2\">\u8fd9\u91cc\u662f\u7b2c\u4e8c\u5217<\/div>   \n\n<div class=\"clear\"><\/div>   \n\n<\/div>   \n\n<div id=\"column3\">\u8fd9\u91cc\u662f\u7b2c\u4e09\u5217<\/div>   \n\n<div class=\"clear\"><\/div>   \n\n<\/div>  \n<\/code><\/pre>\n
CSS:<\/p>\n
\u4ee5\u4e0b\u662f\u5f15\u7528\u7247\u6bb5\uff1a<\/p>\n
#header{width:100%; height:auto;}   \n\n#wrap{ width:100%; height:auto;}   \n\n#column{ float:left; width:60%;}   \n\n#column1{ float:left; width:30%;}   \n\n#column2{ float:right; width:30%;}   \n\n#column3{ float:right; width:40%;}   \n\n.clear{ clear:both;}  \n<\/code><\/pre>\n
\u4e09\u884c\u4e09\u5217<\/h3>\n
xhtml:<\/p>\n
\u4ee5\u4e0b\u662f\u5f15\u7528\u7247\u6bb5\uff1a<\/p>\n
<div id=\"header\">\u8fd9\u91cc\u662f\u9876\u884c<\/div>   \n\n<div id=\"warp\">   \n\n<div id=\"column\">   \n\n<div id=\"column1\">\u8fd9\u91cc\u662f\u7b2c\u4e00\u5217<\/div>   \n\n<div id=\"column2\">\u8fd9\u91cc\u662f\u7b2c\u4e8c\u5217<\/div>   \n\n<div class=\"clear\"><\/div>   \n\n<\/div>   \n\n<div id=\"column3\">\u8fd9\u91cc\u662f\u7b2c\u4e09\u5217<\/div>   \n\n<div class=\"clear\"><\/div>   \n\n<\/div>   \n\n<div id=\"footer\">\u8fd9\u91cc\u662f\u5e95\u90e8\u4e00\u884c<\/div>  \n<\/code><\/pre>\n
CSS:<\/p>\n
\u4ee5\u4e0b\u662f\u5f15\u7528\u7247\u6bb5\uff1a<\/p>\n
#header{width:100%; height:auto;}   \n\n#wrap{ width:100%; height:auto;}   \n\n#column{ float:left; width:60%;}   \n\n#column1{ float:left; width:30%;}   \n\n#column2{ float:right; width:30%;}   \n\n#column3{ float:right; width:40%;}   \n\n.clear{ clear:both;}   \n\n#footer{width:100%; height:auto;}  \n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u5355\u884c\u4e00\u5217 \u4ee5\u4e0b\u662f\u5f15\u7528\u7247\u6bb5\uff1a body { margin: 0px; padding: 0px; teRead More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[4],"_links":{"self":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/57"}],"collection":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/comments?post=57"}],"version-history":[{"count":1,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/57\/revisions"}],"predecessor-version":[{"id":60,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/57\/revisions\/60"}],"wp:attachment":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/media?parent=57"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/categories?post=57"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/tags?post=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}