masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > 求指教布局_html/css_WEB-ITnose

求指教布局_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-24 12:21:47
asal
1136 orang telah melayarinya

本帖最后由 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>
Salin selepas log masuk

效果图：

效果图贴错了，这个：

Label berkaitan：
求指教布局
sumber：php.cn
Artikel sebelumnya：关于子类不想继承父类的问题_html/css_WEB-ITnose Artikel seterusnya：61个网页特效 很时尚 视觉效果很好_html/css_WEB-ITnose
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Permintaan POST berfungsi dengan baik apabila menggunakan Postman tetapi tidak apabila menggunakan React axios dan Spring Boot backend Daripada konsol reaksi saya mendapat ralat "Tidak dapat memuatkan sumber: Status resp...
daripada 2024-04-05 13:07:01
0
1
396
Buat susun atur kad yang pelbagai menggunakan grid tunggal atau Flex: panduan praktikal Saya cuba membuat susun atur kad responsif seperti dalam gambar. Apa yang saya lakukan pad...
daripada 2024-04-02 21:07:36
0
2
377
POST meminta untuk mengekstrak GUID daripada tapak web .aspx menggunakan Mechanize Terdapat tapak web yang dipanggil https://www.guidgenerator.com/online-guid-generator.aspx...
daripada 2024-04-02 12:43:40
0
1
420
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan