0

私は 2 つの div を横に並べて配置しており、それらはデスクトップで必要に応じて動作しますが、Mozilla Firefox のようなモバイル ブラウザー (Chrome モバイルではデスクトップとして動作します) になると、Safari の div の 1 つが下にプッシュされます。div コンテナに overflow:scroll を設定しようとしましたが、問題は解決しません。誰かが私を助けることができますか？

CSS

.container{
    margin: 10px  auto 20px auto;
    display:table;
   overflow:scroll;
} 

.left_col{
    width: 700px;
    border:1px solid #C0C0C0;
    display: -moz-inline-stack;
    display: inline-block;
    background-color:#fff;
    vertical-align:top;
    zoom: 1;
    *display: inline;
}

.right_col{
    width:300px;
    border:1px solid #C0C0C0;
    display: -moz-inline-stack;
    display: inline-block;
    height:1090px;
    background-color:#fff;
    vertical-align:top;
    zoom: 1;
    *display: inline;
}

html

<div class="container">
    <div class=left_col"></div>
    <div class="right_col"></div>
</div>
4

2 に答える 2

1

モバイル ブラウザで 1000 ピクセルのコンテンツを固定するには、ビューポートの幅が十分ではありません。そのレイアウトを維持したい場合は、パーセンテージ幅の使用を検討してください。

.left_col{
    width: 70%;
    float:left;
}

.right_col{
    width:30%;
    float:left;
}
于 2013-09-18T23:44:35.410 に答える
0

私の解決策は、可能であれば親の幅を移動することです。

.container{
   ...
   width:1024px;
} 

.left_col{
    width: 700px;
    float:left;
}

.right_col{
    width:300px;
    float:left;
}
于 2013-09-18T23:38:06.853 に答える