0

イベントを表示する流体グリッドセクションに取り組んでいます。画面解像度に基づいて div のサイズを調整するメディア クエリがあります。すべての div が同じ高さである場合、見栄えがよくなります。ただし、それらの div の高さが異なる場合、それらの間の垂直方向のスペースが悪く見えます。直す方法はないか考えてみました。cssだけでできるかどうかはわかりません。いくつかのJavaScriptが必要になる場合があります。2 つの画像を添付します。1 つはどのように見えるか、もう 1 つはどのように見せたいかです。HTMLコードは以下です。

<style>
body {
    background-color:#dedede;
    margin:0;
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px; 
}
#pagewrap {
    width: 100%;
    margin: 10px auto;
}
.box {
    box-sizing:border-box;
    padding:10px;
    margin:6px;
    max-width:220px;
    border:solid 1px #ccc;
    background-color:#fff;
    float:left;
}
@media screen and (max-width: 1200px) {
    .box {
        width:19%;
        margin:.5%;
    }
} 
@media screen and (max-width: 980px) {
    .box {
        width:23.75%;
        margin:.5%
    }
}
@media screen and (max-width: 650px) {
    .box {
        width:31%;
        margin:1%;
    }
}
@media screen and (max-width: 565px) {
    .box {
        width:46%;
        margin:2%;
    }
}
@media screen and (max-width: 360px) {
    .box {
        width:90%;
    }
}
</style>
</head>
<body>
<div id="pagewrap"> 
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultricesneque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus  posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus  Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdumneque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
</div>
</body>

現在の様子: (出典: asingularcreation.com )それはどのようなものか

私が望むもの: (ソース: asingularcreation.com )どのように見せたいか

ご協力いただきありがとうございます！

4

2 に答える 2

0

これは私が見つけた解決策であり、うまく機能します。

jQuery(document).ready(function($) {
    var CollManag = (function() {
        var $ctCollContainer = $('#pagewrap'),
        collCnt = 1,
        init = function() {
            changeColCnt();
            initEvents();
            initPlugins();
        },
        changeColCnt = function() {
            var w_w = $(window).width();
            if( w_w <= 360 ) n = 1;
            else if( w_w <= 565 ) n = 2;
            else if( w_w <= 720 ) n = 3;
            else if( w_w <= 980 ) n = 4;
            else n = 5;
        },
        initEvents = function() {
            $(window).on( 'smartresize.CollManag', function( event ) {
                changeColCnt();
            });
         },
         initPlugins = function() {
            $ctCollContainer.imagesLoaded( function(){
                $ctCollContainer.masonry({
                    itemSelector : '.box',
                    columnWidth : function( containerWidth ) {
                        return containerWidth / n;
                    },
                    isAnimated : true,
                    animationOptions: {
                        duration: 400
                    }
                });
            });
            $ctCollContainer.colladjust();
            $ctCollContainer.find('div.box-multi').collslider();
        };
        return { init: init };
    })();
    CollManag.init();
 });
于 2013-04-26T16:36:39.687 に答える