Home >Web Front-end >HTML Tutorial >新手求一个div排版_html/css_WEB-ITnose
新手求一个div排版_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:28:121307browse
一个自适应的排版，
排版方式是，要么两行两列显示图片和文字 要么一行四列显示图片文字 图片文字排版无所谓，就放图片下面就行。
主要是，如果屏幕比较宽，图片会跟着放大，如果小了，图片也小了。文字不变。求高手教我。
示例我画图说明
回复讨论(解决方案)
求大神指教 ，我不太擅长做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个小框的高度、宽度用占总宽度的百分比来做。
多写代码多试。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：DIV定位IE正常 火狐不正常_html/css_WEB-ITnoseNext article：设置元素背景透明度_html/css_WEB-ITnose