Please advise on layout_html/css_WEB-ITnose-HTML Tutorial-php.cn

Please advise on layout_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:21:47

Original

1139 people have browsed it

This post was last edited by Kenticny on 2013-05-28 10:58:11

DIV CSS layout

As shown in the picture above, please advise on using DIV completely CSS layout requires concise and flexible code. The code I wrote myself is too complicated. . So I came here to ask for advice, please give me some advice. . Newbie~

Reply to the discussion (solution)

Draw it yourself in dw, or choose a similar layout and change it yourself

div embedded Set float

It should be easy if the layers are clearly distinguished. Divide it up and down, then divide the top left and right sides, then divide the top right side up and down again. Divide it this way. It is necessary to control the float

The height and width of each frame should be set accurately. Wouldn't it be better if everything is float

As a newbie, if you want me to do it, use 3 divs, all using float: left; then put the small div into it. The small div also uses float: left

Code:

<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>

Copy after login

Rendering:

Rendering sticker Wrong, this one: