0

レスポンシブにしたい3つのdivがあります。最大幅 990px​​ の場合、3 列のレイアウトにしたいと考えています。最大幅 650px を超える場合、最初の 2 つの div を 30% ～ 70% に広げて全体の長さを埋め、3 番目の列を下に移動して全体の長さに広げたいと思います。

これまでのところ、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 に答える