[英]Scale up inner divs height , width according to outer div and decrease the no. of inner divs
I have three equally divided vertical divs having many divs inside each of the vertical divs as follows. 我有三个等分的垂直div,每个垂直div内有很多div,如下所示。
I want the inner divs to wrap to a 2 column or 1 column grid (depending on browser height width) with each divs height width increasing on browser resize. 我希望内部div包裹到2列或1列网格(取决于浏览器高度宽度),每个div高度宽度在浏览器调整大小时增加。 Presently the divs wrap around but still some extra space is left and I want the inner divs to increase in size with browser size decreasing filling that extra space.
目前div已经环绕但仍留有一些额外的空间,我希望内部div的大小随着浏览器大小的增加而减少填充额外的空间。
Here is the image when i resize the browser 这是我调整浏览器大小时的图像
My HTML is as follows 我的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>
Try adding some media queries at the breakpoints. 尝试在断点处添加一些媒体查询。
@media (max-width: 940px) {
.verticalTiles {
width: 45%;
}
}
http://jsfiddle.net/ferne97/wh7kD/ http://jsfiddle.net/ferne97/wh7kD/
Might want to look into some responsive grids like http://responsive.gs/ or http://www.gumbyframework.com/docs/grid 可能想要查看一些响应式网格,如http://responsive.gs/或http://www.gumbyframework.com/docs/grid
you don't need javascript for this. 你不需要javascript。 what happens in your example is that you have three 30% wide elements with 10 px margin left, when you resize the browser, the 30px from the three tiles added up is less than the 10% remaining from the width of the tiles and they don't fit anymore, try using relative values for the margin like margin-left: 3%
在你的例子中发生的是你有三个30%宽的元素,剩余10 px的边距,当你调整浏览器大小时,三个瓷砖累加的30px小于瓷砖宽度剩余的10%,他们不会不再适合,尝试使用边距的相对值,如margin-left:3%
ok, so based on your comment, you should use something like this: 好的,所以根据你的评论,你应该使用这样的东西:
function wiwi() {
var tenpercent = $('.verticalReports').width() / 10;
if ( tenpercent < 30 ) {
$('.verticalTiles').css('width','45%');
}
}
$(document).ready(function() {
wiwi();
$(window).resize(function() {
wiwi();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.