div と CSS レイアウトの組み合わせに関するアドバイスを求める issue_html/css

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

ホームページ

ウェブフロントエンド

htmlチュートリアル

div と CSS レイアウトの組み合わせに関するアドバイスを求める issue_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:21 PM

この投稿は、u010856150 によって 2013-05-27 16:58:45 に最終編集されました

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 までご連絡ください。