0

3つすべてdivで使用して、並べて配置された3つの があります。float: left

<div id="wrapper">
    <div id="left">...</div>
    <div id="center">...</div>
    <div id="right">...</div>
</div>

左と中央divの s は固定幅ですが、右divはコンテンツに応じて可変幅になります。

私が抱えている問題は、ブラウザーのウィンドウをdivs の合計幅よりも小さくすると (したがって、ラッパーdivが狭くなりすぎると)、それらがバラバラになり、並んで表示されなくなることです。
静的/絶対配置を使用すると簡単に修正できることはわかっていますが、私の経験からすると、使用するよりも維持するのが難しく、floatむしろ避けたいと思います。

別のポジショニング手法に切り替えることなくこれを修正する方法はありますか?

4

1 に答える 1

0

下部にスクロール ボールを強制しても、同じ行に div を保持しますか? その場合は、コンテナ div または右側の div に min-width: を設定できます。

また、スタイル シートで @media ルールを使用して、画面が特定のサイズよりも小さい場合にのみ、右側の div に固定幅を与えることもできます。何かのようなもの

@media only screen and (max-width: 600px) { 
 #div-right {  width:150px    }
}
于 2013-02-03T00:09:55.087 に答える