ホームページ >ウェブフロントエンド >htmlチュートリアル >div+css: 1 行に 3 つ以上のセクションをレイアウト_html/css_WEB-ITnose

div+css: 1 行に 3 つ以上のセクションをレイアウト_html/css_WEB-ITnose

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

最近、友人から「div を使用して Web ページに 3 つのセクションを実装するにはどうすればよいですか?」と質問されました。
以下は 3 つのセクションの div レイアウトの簡単な説明です:

アイデアは次のとおりです: 1. 最初に図の赤い DIV "1" を定義します

2. 次に 2 つの緑の DIV "2" を配置します。赤いフレーム (CSS を使用して、左側に 1 つ、右側に 1 つずつ、2 つの緑色の DIV を定義します---CSS: float:left; float:right;) 3. 次に、2 つの青色の DIV を緑色の DIV に配置します。右側の "3 " (CSS を使用して、左側と右側に 1 つずつ、2 つの青い DIV を定義します---CSS: float:left; float:right;)

同様に、さらにセクションがある場合は、同じレイヤーを使用します。メソッドをネストするだけです。


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