Heim >Web-Frontend >HTML-Tutorial >新手求一个div排版_html/css_WEB-ITnose
新手求一个div排版_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:28:121313Durchsuche
一个自适应的排版，
排版方式是，要么两行两列显示图片和文字 要么一行四列显示图片文字 图片文字排版无所谓，就放图片下面就行。
主要是，如果屏幕比较宽，图片会跟着放大，如果小了，图片也小了。文字不变。求高手教我。
示例我画图说明
回复讨论(解决方案)
求大神指教 ，我不太擅长做div+css
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> .div { min-width:650px; border:1px green solid; height:400px; } .maxdiv { border: 1px red solid; height: 300px; float:left; width:48%; min-width:300px; } .maxdiv div { width: 40%; height: 200px; border: 1px red solid; float: left; margin: 4%; min-width: 180px; } </style></head><body> <div class="div"> <div class="maxdiv"> <div> </div> <div> </div> </div> <div class="maxdiv"> <div> </div> <div> </div> </div> </div></body></html> 可以自己改改样式和加文字
nbsp;html>
1
2
3
4
显示的4个小框的高度、宽度用占总宽度的百分比来做。
多写代码多试。
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：DIV定位IE正常 火狐不正常_html/css_WEB-ITnoseNächster Artikel：设置元素背景透明度_html/css_WEB-ITnose