Heim > Artikel > Web-Frontend > 求指教布局_html/css_WEB-ITnose
求指教布局_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:21:471114Durchsuche
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>
效果图：
效果图贴错了，这个：
Stellungnahme：
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
Vorheriger Artikel：关于子类不想继承父类的问题_html/css_WEB-ITnoseNächster Artikel：61个网页特效 很时尚 视觉效果很好_html/css_WEB-ITnose