ホームページ >ウェブフロントエンド >htmlチュートリアル >このアダプティブ レイアウトを実装するにはどうすればよいでしょうか? _html/css_WEB-ITnose

このアダプティブ レイアウトを実装するにはどうすればよいでしょうか? _html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:19:421031ブラウズ

外側の div はブラウザと同じ幅であり (私はこれを知っています)、左側と右側の 2 つの div が含まれています。1 つの div は固定ピクセル幅で、もう 1 つは残りの幅です (一部のピクセルが必要です)。マージン)。 float:left は知っていますが、その時の残り幅の書き方が分かりません。
jsは使用できません。


ディスカッションに返信(解決策)

table を使用する

私が見たもの

table を使用する
私が見たものは table を使用しておらず、今では一般的にレイアウトに div が使用されます。

たとえば、左側は 120px です。ページ要素には .left .right が 2 つあります
スタイルは次のように記述されます
.left{float:left;width:120px;}
.right{margin-left:120px;width:100%;}

たとえば、左側は120ピクセルです。ページ要素には .left .right が 2 つあります
スタイルは次のように書きます
.left{float:left;width:120px;}
.right{margin-left:120px;width:100%;}
自分で解決しましたこのように、重要な点は、右の幅が自動であることです(設定しないだけです)。これを行うと、水平スクロールバーが表示されます。設定しない場合は、残った部分をそのまま使用できます。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。