大佬教程收集整理的这篇文章主要介绍了jquery – 根据外部div扩大内部div的高度,宽度并减少no.内在的div，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我希望内部div包裹到2列或1列网格(取决于浏览器高度宽度),每个div高度宽度在浏览器调整大小时增加.目前div已经环绕但仍留有一些额外的空间,我希望内部div的大小随着浏览器大小的增加而减少填充额外的空间.
这是我调整浏览器大小时的图像
我的HTML如下
<html> <head> <Meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <style type="text/css"> body { height: 100%; font-size: 100%; } .main { border: 2px solid black; position: absolute !important; width: 100% !important; height: 100% !important; left: 0px !important; top: 0px !important; z-index: 1 !important; Box-sizing: border-Box; -moz-Box-sizing: border-Box; overflow: hidden; } .verticalReports { width: 32%; border: 1px solid black; height: 100%; float: left; overflow:hidden; } .verticalTiles { width: 30%; height: 20%; BACkground-color: #e0d8ed; margin-left: 10px; margin-top: 13px; float: left; } </style> </head> <body> <div class="main"> <div class="verticalReports"> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> </div> <div class="verticalReports"> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> </div> <div class="verticalReports"> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> <div class="verticalTiles"></div> </div> </div> </body> </html>
@media (max-width: 940pX) { .verticalTiles { width: 45%; } }
http://jsfiddle.net/ferne97/wh7kD/
可能想要查看一些响应式网格,如http://responsive.gs/或http://www.gumbyframework.com/docs/grid
以上是大佬教程为你收集整理的jquery – 根据外部div扩大内部div的高度,宽度并减少no.内在的div全部内容，希望文章能够帮你解决jquery – 根据外部div扩大内部div的高度,宽度并减少no.内在的div所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。