ホームページ >ウェブフロントエンド >htmlチュートリアル >layout_html/css_WEB-ITnoseについてアドバイスをお願いします
layout_html/css_WEB-ITnoseについてアドバイスをお願いします
- WBOYオリジナル
- 2016-06-24 12:21:471139ブラウズ
DIV CSS レイアウト
上の図に示すように、完全に DIV+CSS を使用したレイアウトをお願いしたいのですが、簡潔で柔軟性の高いコードが必要ですが、自分で書くには複雑すぎます。 。そこでアドバイスを求めに来たのですが、アドバイスをお願いします。 。初心者〜
ディスカッション（解決策）に返信
dw で自分で描くか、同様のレイアウトを選択して自分で変更してください
div ネストフロート
レイヤーが明確に分かれていれば簡単なはずです。上下に分割し、次に上部の左右を分割し、さらに上部の右側を上下に分割します。このように分けます。フロートを制御する必要があります
各フレームの高さと幅を正確に設定する必要があります。すべてがフロートであれば良いと思いませんか?
私は初心者なので、それをしたい場合は 3 div を使用してください。 、すべて float: left; を使用し、その後、小さな div をラップします。すると、小さな div も float: left を使用します
コード:
<html> <head> <title>图片布局</title> </head> <body> <div style="float:left;width:100%;height:100%"> <div style="float:left;width:100%;height:66.66%;"> <img style="float:left;width:50%;height:100%;" src="mr.jpg"/> <div style="float:right;width:50%;height:100%;"> <img style="float:left;width:100%;height:50%;" src="mr.jpg"/> <div style="float:right;width:100%;height:50%;"> <img style="float:left;width:50%;height:100%;" src="mr.jpg"/> <img style="float:right;width:50%;height:100%;" src="mr.jpg"/> </div> </div> </div> <div style="float:left;width:100%;height:33.33%;"> <img style="float:left;width:75%;height:100%;" src="mr.jpg"/> <img style="float:right;width:25%;height:100%;" src="mr.jpg"/> </div> </div> </body></html>
レンダリング:
レンダリングは間違って投稿されます:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。