根據外部div放大內部div高度，寬度並減少no。內在的div

Question

我有三個等分的垂直div，每個垂直div內有很多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>

Answer 1

嘗試在斷點處添加一些媒體查詢。

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

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

可能想要查看一些響應式網格，如http://responsive.gs/或http://www.gumbyframework.com/docs/grid

Answer 2

你不需要javascript。 在你的例子中發生的是你有三個30％寬的元素，剩余10 px的邊距，當你調整瀏覽器大小時，三個瓷磚累加的30px小於瓷磚寬度剩余的10％，他們不會不再適合，嘗試使用邊距的相對值，如margin-left：3％

好的，所以根據你的評論，你應該使用這樣的東西：

    function wiwi() {
    var tenpercent = $('.verticalReports').width() / 10;
    if ( tenpercent < 30 ) {
        $('.verticalTiles').css('width','45%');
    }
}
$(document).ready(function() {
    wiwi();
    $(window).resize(function() {
        wiwi();
    });
});

根據外部div放大內部div高度，寬度並減少no。內在的div

問題描述

2 個解決方案

解決方案1
2 2013-02-13 09:31:53

解決方案2
1 2013-02-13 09:25:12

根據外部div放大內部div高度，寬度並減少no。 內在的div

問題描述

2 個解決方案

解決方案1 2 2013-02-13 09:31:53

解決方案2 1 2013-02-13 09:25:12

根據外部div放大內部div高度，寬度並減少no。內在的div

解決方案1
2 2013-02-13 09:31:53

解決方案2
1 2013-02-13 09:25:12