Question

所以我希望这些div表现得像块一样，只是堆叠在彼此之上，就像漂亮的小元素一样......唉，事实并非如此。我以前遇到过这个问题，并设法修复它...但我不知道它是如何再次发生的。

当我在chrome或firefox中打开html文件时，表（在它自己的div中）拒绝玩得很好并且坐在H1下面（也在它自己的div中）。

请注意，div也要居中并且为此目的存在于容器内。我也试图使这个网站符合HTML5标准。似乎不支持很多有用的东西：/

Ye 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">&nbsp;</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 &amp; a Truck</td>
        <td class="price centered">Mon-Wed</td>
        <td class="price centered">Thurs-Fri</td>
      </tr>
    </table>
  </div>     
  </div>
</div>
</body>

Ye 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;
  }

Answer 1

莱克斯。

direction: row;

您正在尝试构建行，但您需要一列。

请参阅jsfiddle。

http://jsfiddle.net/9VxtJ/3/

另外你应该阅读这个规范。 http://dev.w3.org/csswg/css-flexbox/

Divs彼此相邻而不是垂直堆叠：异常行为？

1 个答案: