css+div布局

来源：互联网发布：苹果电脑系统修复软件编辑：程序博客网时间：2024/06/04 19:06

一列多行：

<html><head><title>一列多行</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body { margin: 0px; padding: 0px; text-align: center;} div{border-color:red;border-style:solid;border-width:1px;}#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;} #content-mid {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}</style></head><body><div id=content-top><p ID="A1">床前明月光，疑是地上霜</p><p ID="A2">舉頭望明月，低頭思故鄉</p></div><div id=content-mid><h2 ID="A1">床前明月光，疑是地上霜</h1><h2 ID="A2">床前明月光，疑是地上霜</h1><h2 ID="A3">床前明月光，疑是地上霜</h1></div><div id=content-end><h1 ID="A1">床前明月光，疑是地上霜</h1><h1 ID="A2">床前明月光，疑是地上霜</h1><h1 ID="A3">床前明月光，疑是地上霜</h1></div></body></html>

多行多列

<html><head><title>多列</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body { margin: 0px; padding: 0px; text-align: center;} div{border-color:red;border-style:solid;border-width:1px;}#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;} #content{width=700px; margin-left:auto; margin-right:auto;overflow:auto}#content #content-left { float:left;width:280px;} #content #content-right {float:right;width:415px;} #footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; } </style></head><body><div id=header><p>《静夜思》</p></div><div id=content><div id=content-left><p ID="A1">床前明月光，疑是地上霜</p><p ID="A2">舉頭望明月，低頭思故鄉</p></div><div id=content-right><h1 ID="A1">床前明月光，疑是地上霜</h1><h1 ID="A2">床前明月光，疑是地上霜</h1></div></div><div id=footer><p>里面的床是指小马扎</p></div></body></html>

一行多列：

<html><head><title>一列多行</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body { margin: 0px; padding: 0px; text-align: center;} div{border-color:red;border-style:solid;border-width:1px;}#content{width=700px; margin-left:auto; margin-right:auto;overflow:auto}#content #content-left { position: absolute; top: 0px; left: 0px; width: 100px; } #content #content-mid-better{margin: 20px 190px 20px 190px; } #content #content-mid{margin: 20px 190px 20px 190px; } #content #content-right {position: absolute;top: 0px; right: 0px; width: 120px;} </style></head><body><div id=content><div id=content-left><p ID="A1">床前明月光，疑是地上霜</p><p ID="A2">舉頭望明月，低頭思故鄉</p></div><div id=content-mid><p ID="A1">床前明月光，疑是地上霜</p><p ID="A2">舉頭望明月，低頭思故鄉</p></div><div id=content-right><p ID="A1">床前明月光，疑是地上霜</p><p ID="A2">舉頭望明月，低頭思故鄉</p></div></div></body></html>