Question

我知道有很多关于使用DIV和CSS布局页面的问题和答案，但没有一个能帮助我接近我正在寻找的布局。

我试图停止使用表格布置页面的习惯（我很少做页面布局和旧习惯很难）。

我正在寻找的布局（在黑页上）是：

enter image description here

如果屏幕显示超过800px宽的任何内容，我希望它保留在页面的中心

我到目前为止的HTML是：

<body>
   <form id="form1" runat="server">
      <div id="header">Header</div>
      <div id="outerleftcolumn">Left Column</div>
      <div id="leftcolumn">Left Column</div>
      <div id="content">Content</div>
      <div id="outerrightcolumn">Left Column</div>
      <div id="footer">Footer</div>
   </form>
</body>

我到目前为止的CSS：

body {
margin: 0px;
padding: 0px;
background-color:black;
}

#header {
background: #438a48;
width: 770px;
height:50px;
}
#outerleftcolumn {
background-image:url(/Templates/Red/Images/LeftBoarder.jpg);
float: left;
width: 15px;
height: 700px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 150px;
height: 700px;
}
#outerrightcolumn
{
background-image: url(/Templates/Red/Images/RightBoarder.jpg);
float: right;
width: 15px;
height: 700px;
}
#content {
background: #ff6a00;
float: left;
width: 635px;
height: 700px;
}
#footer {
background: #df781c;
clear: both;
width: 800px;
 }

我一直在阅读一篇文章或帖子，并认为我知道我必须做的只是改变一个设置而整个事情变成了循环laa laa。我可以使用心跳表来实现这一点，但正如我所说，我正在尝试（并且失败）放弃我的坏习惯。两个外部div中的图像只是带有渐变的jpg＆＃39; s。

任何指针都会受到赞赏。

Answer 1

body {
	margin: 0px;
	padding: 0px;
	background-color:#000;
}
#outerleftcolumn {
	float: left;
	width: 15px;
	height: 700px;
	background-color: red;
}
#outerrightcolumn
{
	background-image: url(/Templates/Red/Images/RightBoarder.jpg);
	float: right;
	width: 15px;
	height: 700px;
	background-color: red;
}
#centercolumn{
	overflow: hidden;
}
form{
	display: block;
	margin: auto;
	width: 800px;
	background-color: #000;
}
#header {
	background: #438a48;
	width: 770px;
	height:50px;
}

#leftcolumn {
	background: #2675a8;
	float: left;
	width: 150px;
	height: 620px;
}
#content {
	background: #fff;
	float: left;
	width: 620px;
	height: 620px;
}
#anotherheader{
	float: left;
	width: 100%;
	height: 50px;
	background-color: yellow;
}
#footer {
	background: #df781c;
	height: 30px;
	width: 800px;
	float: left;
 }

<body>
   <form id="form1" runat="server">
   		<div id="outerleftcolumn">Left Column</div>
   		<div id="outerrightcolumn">Left Column</div>
   		<div id="centercolumn">
   			<div id="header">Header</div>
   			<div id="leftcolumn">Left Column</div>
   			<div id="content">
   				<div id="anotherheader">

   				</div>
   			</div>
   			<div id="footer">Footer</div>
   		</div>
   </form>
</body>

Answer 2

我调整了一些代码，摆脱了外部列：

HTML：

<body>
 <form id="form1" runat="server">
  <div id="header">Header</div>
  <div id="leftcolumn">Left Column</div>
  <div id="content">Content</div>
  <div id="footer">Footer</div>
 </form>
</body>

CSS：

   body {
   margin: 0px;
   padding: 0px;
   background-color:red;
   width: 800px;
   }
   #header {
   background: #438a48;
   width: 770px;
   height:50px;
   margin: 0px 15px;
   }
   #leftcolumn {
   background: #2675a8;
   float: left;
   width: 150px;
   height: 700px;
   margin-left: 15px;
   }
   #content {
   background: #ff6a00;
   float: left;
   width: 620px;
   height: 700px;
   margin-right: 15px;
   }
   #footer {
   background: lightblue;
   clear: both;
   width: 770px;
   margin: 0px 15px;
   }

这是一个小提琴：http://jsfiddle.net/v81wdmgp/

使用DIV格式化页面布局

2 个答案: