ホームページ >ウェブフロントエンド >htmlチュートリアル >div と CSS レイアウトの組み合わせに関するアドバイスを求める issue_html/css_WEB-ITnose
div と CSS レイアウトの組み合わせに関するアドバイスを求める issue_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:21:33914ブラウズ
CSS レイアウト div HTML
<html><head> <title>无标题</title> <style type="text/css"> .hbox{ } .vbox{ } </style><body> <div width="100%" height="100%" class="hbox"> <div width="50%" height="100%" class="vbox"> <img src="mr.jpg" width="100%" height="50%"/> <img src="mr.jpg" width="100%" height="50%"/> </div> <div width="50%" height="100%" class="hbox"> <img src="mr.jpg" width="50%" height="100%"/> <img src="mr.jpg" width="50%" height="100%"/> </div> </div></body></html> 効果は次のとおりです。最初に水平レイアウトが 2 つの列に分割され、次に左側が縦レイアウト、右横レイアウトなのですが、CSSはどのように書けばいいのでしょうか？
ディスカッションに返信 (解決策)
レンダリングを補足します:
<!DOCTYPE html><html> <head> <style> .content{ width:300px; height:200px; border:solid 1px red; } .contentLeft{ float:left; width:33%; height:100%; border-right:solid 1px #ccc; } .leftTop{ width:100%; height:50%; border-bottom:solid 1px black; } .leftbottom{ width:100%; height:50%;} </style> </head> <body> <div class="content"> <div class="contentLeft"> <div class="leftTop"></div> <div class="leftbottom"></div> </div> <div class="contentLeft"></div> <div class="contentLeft"></div> </div> </body></html> この効果を達成するには 2 つのスタイルしか設定できません。1 つは水平スタイル、もう 1 つは垂直スタイルです。私のコードのように？
自分で修正してください
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script src="../Res/Script/jquery-1.9.1.js"></script> <style type="text/css"> * { margin:0px; padding:0px; } .hbox { height: 50%; width: 100%; float:left; } .vbox { width: 50%; height: 100%; float:left; } </style></head><body> <div width="100%" height="100%" class="hbox" style=" background:#c8f3f3"> <div width="50%" height="100%" class="vbox"> <div style="background: #808080" class="hbox" >A</div> <div style="background: #2aac3c" class="hbox">B</div> </div> <div width="50%" height="100%" class="vbox"> <div style="background: #ffd800" class="vbox">C</div> <div style="background: #ff0000" class="vbox">D</div> </div> </div></body></html> 完了しました、qq290032431 と w_mojian180 に感謝します!
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。