同位素可点击元素:增长高度以匹配内容

Question

我有一个带有可点击元素的标准同位素视图.通过单击元素,它将变得更大.大元素的高度在CSS文件中定义,但我需要可变高度,具体取决于DIV的内容(内容是文本); 不幸的是,使用min-height css-property而不是height不起作用,高度始终是定义的最小高度,即使内容更多.有什么意见吗？

继承人我的javascriptcode:

<script>
jQuery(function() {
    var jQuerycontainer = jQuery('#container');
         jQuerycontainer.addClass('clickable');
   // add the class large to the first element
     jQuerycontainer.find('.views-row-1').each(function() {
         jQuery(this).addClass('large');
     });
     jQuerycontainer.isotope({
        itemSelector: '.element',
        masonry: {
            columnWidth: 230
        },
        masonryHorizontal: {
            rowHeight: 230
        }
    });
    var jQueryoptionSets = jQuery('#options .option-set'),
        jQueryoptionLinks = jQueryoptionSets.find('a');
    jQueryoptionLinks.click(function() {
        var jQuerythis = jQuery(this);
        // don't proceed if already selected
        if (jQuerythis.hasClass('selected')) {
            return false;
        }
        var jQueryoptionSet = jQuerythis.parents('.option-set');
        jQueryoptionSet.find('.selected').removeClass('selected');
        jQuerythis.addClass('selected');
        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
            key = jQueryoptionSet.attr('data-option-key'),
            value = jQuerythis.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[key] = value;
        if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
            // changes in layout modes need extra logic
            changeLayoutMode(jQuerythis, options);
        } else {
            // otherwise, apply new options
            jQuerycontainer.isotope(options);
        }
        return false;
    });
    // change size of clicked element
    jQuerycontainer.delegate('.element', 'click', function() {
       // first remove all large classes
      jQuerycontainer.find('.large').each(function(){
        jQuery(this).toggleClass('large');
      });   
        // then we can toggle large on the selected item
        jQuery(this).toggleClass('large');
        jQuerycontainer.isotope('reLayout');
    });
});
</script>

Answer 1

通常,如果您将宽度设置为网格并将高度设置为自动,则同位素项目的高度会增加,具体取决于其内容和内容的样式; 看到这个小提琴在这里.希望有帮助......