让div从内联移动到与媒体查询堆积

Question

我有3个div，我想做出回应。对于最大宽度990px​​，我想让它们成为3列布局。对于超过最大宽度650px，我希望前两个div跨度达到30％-70％以填充整个长度，第三列落在下面并跨越整个长度。

我到目前为止在Chrome中有效，但在Firefox中有bug。

关键是我不能在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

我已经把使用你的代码小提琴。 我已经编辑了你的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/

希望它能帮助！