responsive-design - 固定 + 流動レイアウト

Question

1 列が固定幅で、もう 1 列が残りのスペースを占有する 2 列のレイアウトを作成するにはどうすればよいですか?

このデモをご覧ください。

もともとは流動的なレイアウトを試みたのですが、左の列が小さくなりすぎるのが嫌で、幅を一定に保ちたいと考えていました。

2 番目の列の margin-left を最初の列の幅と同じに設定しようとしましたが、これは 2 番目の列が使用可能なすべてのスペースに拡張されなかったことを意味します。必要なだけのスペースしか占有せず、レイアウトを魅力的に保つには十分ではありませんでした。

#container 内の残りのスペースをすべて #right 列で埋めるにはどうすればよいですか?

Answer 1

ビューポートのサイズによっては、メディア クエリを使用して他の CSS ルールをトリガーすることを検討することをお勧めします。

これはあなたが求めていることをするはずです:

@media only screen and (max-width: 960px) {

    #right { float: none; width: 100%; }

    #left { float: none; }


}