layout_html/css_WEB-ITnoseについてアドバイスをお願いします-htmlチュートリアル-php.cn

layout_html/css_WEB-ITnoseについてアドバイスをお願いします

WBOY

リリース： 2016-06-24 12:21:47

オリジナル

1127 人が閲覧しました

この投稿は Kenticny によって最終編集されました: 2013-05-28 10:58:11

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>

ログイン後にコピー

レンダリング:

レンダリングは間違って投稿されます: