Heim > Web-Frontend > HTML-Tutorial > 求指教布局_html/css_WEB-ITnose

求指教布局_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:21:47
Original
1127 Leute haben es durchsucht

本帖最后由 Kenticny 于 2013-05-28 10:58:11 编辑

DIV CSS 布局



如上图所示,请教完全使用DIV+CSS的布局,求简洁的,灵活性高的代码,我自己写的太复杂了。。所以来请教了,求各位大神指教。。小弟新人~

回复讨论(解决方案)

在dw中自已画一画吧,或者挑着差不多的布局自已改一下

div 嵌套  float

层次分清楚应该就容易了吧。上下分,然后上面左右分,上面的右边再上下分。以此分下去。要控制好float

每个框框的高度设置宽度精确好,所有都float不就好了

菜鸟一个,要我做的话,用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="max-width:90%" src="mr.jpg"/ alt="求指教布局_html/css_WEB-ITnose" > 	    	<div style="float:right;width:50%;height:100%;"> 	    		<img    style="max-width:90%" src="mr.jpg"/ alt="求指教布局_html/css_WEB-ITnose" > 	    		<div style="float:right;width:100%;height:50%;"> 	    			<img    style="max-width:90%" src="mr.jpg"/ alt="求指教布局_html/css_WEB-ITnose" > 	      	 		<img    style="max-width:90%" src="mr.jpg"/ alt="求指教布局_html/css_WEB-ITnose" > 				</div>	    	</div>	    </div>  	    <div style="float:left;width:100%;height:33.33%;"> 	    	<img    style="max-width:90%" src="mr.jpg"/ alt="求指教布局_html/css_WEB-ITnose" > 	      	 <img    style="max-width:90%" src="mr.jpg"/ alt="求指教布局_html/css_WEB-ITnose" > 	    </div> 	  </div> 	</body></html>
Nach dem Login kopieren

效果图:

效果图贴错了,这个:

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage