Html5 / CSS3调整大小布局无法正常工作

Question

调整窗口宽度时

我希望A B C Block按顺序垂直向下排列，

我试了很久，请问如何解决，谢谢你的帮助 像下面......

A

乙

C

div#menu {
  border: 1px solid red;
  padding: 7px 7px 7px 7px;
}
div#navigation {
  border: 1px solid black;
  background: #A9F5A9;
  height: 495px;
  margin: 2px 2px 2px 2px;
  float: left;
  text-align: center;
  line-height: 250px;
  font-size: 100px;
  width: 31%;
}
div#content {
  height: 495px;
  border: 1px solid black;
  background: #F2F5A9;
  margin: 2px 2px 2px 2px;
  width: auto;
  text-align: center;
  line-height: 500px;
  font-size: 100px;
  margin-right: 33%;
}
#wrapper {
  float: right;
  width: 100%;
  margin-right: -33%;
}
div#footer {
  border: 1px solid black;
  background: #81F7F3;
  color: #000;
  height: 50px;
  margin: 1px 1px 1px 1px;
  text-align: center;
  line-height: 50px;
  font-size: 50px;
  clear: both;
  width: auto;
}

<div id="menu">
  <div id="container">
    <div id="wrapper">
      <div id="content">A</div>
    </div>
    <div id="navigation">B</div>
    <div id="footer">C</div>
  </div>
</div>

Answer 1

我想你可以试试这个

div#menu {
    display: table-row;
}