所以我希望这些 div 表现得像 block 一样，只是像漂亮的小元素一样相互堆叠……唉，事实并非如此。我以前遇到过这个问题并设法解决了它......但我不知道如何解决它，因为它再次发生了。
当我在 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;
}
最佳答案
莱克斯。
direction: row;
您正在尝试构建行，但您需要一列。
查看它的 jsfiddle。
您还应该阅读此规范。 http://dev.w3.org/csswg/css-flexbox/
关于html - Div 不是垂直堆叠在一起的 : Abnormal behaviour?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18681533/