css - 让 div 从内联移动到与媒体查询堆叠

Question

我有 3 个要响应的 div。对于最大宽度 990px​​，我想让它们成为 3 列布局。对于超过 650 像素的最大宽度，我想让前两个 div 跨度为 30%-70% 以填充整个长度，第三列位于下方并跨越整个长度。

到目前为止，我所拥有的在 Chrome 中有效，但在 Firefox 中存在错误。

关键是我不能在 div 之间有任何空白。

    <div class="columns">
    <div class="left-nav-menu">Left Column</div>
    <div class="center-content-area">Center Column</div>
    <div class="right-column">Right Column</div>
    </div>

    @media screen and (max-width: 990px) {
    div.columns {background-color:#360; display:table; width: 100%; padding: 0em;}

    div.left-nav-menu {width: 30%; margin: 0; padding: 2em; background-color: #CCC; 
    display:table-cell;}

    div.center-content-area {width: 40%; margin: 0; padding: 2em;
    background-color: #C9F; display: table-cell;}

    div.right-column {width: 30%; margin: 0; padding: 2em; background-color: #CCC;
    display: table-cell;}

    }

    @media screen and (max-width: 650px) {
    div.columns {background-color:#360; display:table; width: 100%; padding: 0em;}

    div.left-nav-menu {width: 30%;margin: 0; padding: 2em; background-color: #CCC;       
    display: inline-table; }

    div.center-content-area {width: 70%; margin: 0; padding: 2em;
    background-color: #C9F; display: inline-table;}

    div.right-column {width: auto; margin: 0; padding: 2em; background-color: #CCC;
    display: block;}

    }

Answer 1

我已经使用您的代码制作了一个 fiddle 。我已经对您的 HTML 和 CSS 进行了一些编辑，但它应该可以在 Firefox 和 Chrome 中运行。

<div class="columns">
  <div class="box left">Left Column</div>
  <div class="box center">Center Column</div>
  <div class="box right">Right Column</div>
</div>

http://jsfiddle.net/j4LYS/1/

希望对您有所帮助!