Scale up inner divs height , width according to outer div and decrease the no. of inner divs

Question

I have three equally divided vertical divs having many divs inside each of the vertical divs as follows.

浏览器未调整大小时

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. 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.

Here is the image when i resize the browser

我调整浏览器大小后

My HTML is as follows

<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>

Answer 1

Try adding some media queries at the breakpoints.

@media (max-width: 940px) {
    .verticalTiles {
        width: 45%;
    }
}

http://jsfiddle.net/ferne97/wh7kD/

Might want to look into some responsive grids like http://responsive.gs/ or http://www.gumbyframework.com/docs/grid

Answer 2

you don't need javascript for this. 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%

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();
    });
});

Scale up inner divs height , width according to outer div and decrease the no. of inner divs

Question

2 answers

solution1
2 2013-02-13 09:31:53

solution2
1 2013-02-13 09:25:12

Scale up inner divs height , width according to outer div and decrease the no. of inner divs

Question

2 answers

solution1 2 2013-02-13 09:31:53

solution2 1 2013-02-13 09:25:12

solution1
2 2013-02-13 09:31:53

solution2
1 2013-02-13 09:25:12