0

我有 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;}

    }
4

1 回答 1

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/

希望能帮助到你！

于 2013-03-19T14:30:08.390 回答