所以我希望这些 div 表现得像块一样，只是像漂亮的小元素一样堆叠在彼此之上……唉，事实并非如此。我以前遇到过这个问题并设法解决它......但我不知道它是怎么再次发生的。
当我在 chrome 或 firefox 中打开 html 文件时，表格（在它自己的 div 中）拒绝播放良好并坐在 H1 下（也在它自己的 div 中）。
请注意，div 也将居中并存在于容器内。我也在努力使这个网站符合 HTML5 标准。似乎不支持很多有用的东西：/
耶HTML：
<body>
<div id="container">
<div id="content" class="centered shadow">
<div>
<h1 class="reddy centered">Welcome to Riverbank Removals</h1>
</div>
<br>
<div>
<table class="centered">
<tr>
<td class="items centered"> </td>
<td class="table_head centered">Mon-Wed</td>
<td class="table_head centered">Thurs-Fri</td>
</tr>
<tr>
<td class="items centered">2 Men & a Truck</td>
<td class="price centered">Mon-Wed</td>
<td class="price centered">Thurs-Fri</td>
</tr>
</table>
</div>
</div>
</div>
</body>
叶CSS：
body
{
background-image:url('bgd.gif');
background-repeat:repeat;
background-color:#bb0000;
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
#container
{
position:relative;
width:700px;
height:100%;
margin-left:auto;
margin-right:auto;
}
#content
{
position:relative;
width:700px;
height:500px;
background-color:#ffffff;
}
.reddy
{
color:#bb0000;
}
.price
{
position: relative;
width:100px;
font-size:16px;
color:#bb0000;
}
.items
{
position: relative;
width:100px;
font-size:14px;
}
.table_head
{
position: relative;
width:50px;
color:#bb0000;
font-size:3;
}
.menu
{
position:relative;
width:280px;
height:120px;
background-color:#ffffff;
}
.centered
{
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-left:auto;
margin-right:auto;
}
.shadow
{
box-shadow: 10px 10px 5px #000000;
}