Question

所以我正在使用Isotope制作一个简单的页面（之前我已经使用过），这就是我想要它做的事情：

每个元素都应该将其高度调整为所有项目的内部内容
所有元素必须是相同的宽度，连续4个（建立此）
它需要适合960px宽度div（建立此）
第一个元素应该与两个普通元素一样宽（建立这个）
最后一个元素应该有不同的背景颜色和border-radius（建立此）

唯一不起作用的是内容的自动高度。我有超级简单的代码：

HTML

<section id="content">
    <div id="container" class="super-list variable-sizes clearfix">
        <div class="element width2">
            Dummy text Dummy text Dummy text Dummy text Dummy text
        </div>
        <div class="element">
            <img src="img/img.jpg" alt="" title="" width="200px" height="300px" /><br />
          <a href="#" target="_blank">Link</a>
        </div>
        <div class="element">
             <a href="#" target="_blank">link</a>
        </div>
        <div class="element">
            Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text
        </div>
        <div class="element">
            <img src="img/img.jpg" alt="" title="" width="200px" height="400px" /><br />
        </div>
            <div class="element">
            <img src="img/img.jpg" alt="" title="" width="200px" height="300px" /><br />
          <a href="#" target="_blank">Link</a>
        </div>
        <div class="element">
             <a href="#" target="_blank">link</a>
        </div>
        <div class="element">
            Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text Dummy text
        </div>
        <div class="element">
            <img src="img/img.jpg" alt="" title="" width="200px" height="900px" /><br />
        </div>
        <div class="element">
            <img src="img/img.jpg" alt="" title="" width="200px" height="100px" /><br />
          <a href="#" target="_blank">Link</a>
        </div>
        <div class="element">
             <a href="#" target="_blank">link</a>
        </div>
        <div class="element">
            Dummy text Dummy text Dummy Dummy text Dummy text Dummy text
        </div>
        <div class="element vanmij">
            <img src="img/img.jpg" alt="" title="" width="200px" height="400px" /><br />
        </div>
    </div>
</section>

这是我的javascript：

<script>    
    $(window).load(function(){
            var $container = $('#container');
            $container.imagesLoaded( function(){ <- I have no idea what this is, sorry!
                $container.isotope({
                    masonry: {
                        columnWidth: 240
                    },
                });
            });
        });         
    </script>

我的CSS：

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
z-index: 2;
}

.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}

.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}

.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property:    -moz-transform, opacity;
-ms-transition-property:     -ms-transform, opacity;
-o-transition-property:      -o-transform, opacity;
transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}


/**** Base styles ****/

body {
background: url(img/bg.jpg) fixed no-repeat;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

/**** Isotope styles ****/

/* required for containers to inherit vertical size from window */


#container {
margin-bottom: 20px;
width: 960px;
margin: 0 auto;
}

h1.title {
background: none repeat scroll 0 0 #73BD1E;
color: #FFFFFF;
display: inline-block;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
font-weight: 300; 
font-weight: bold;
margin: 0 auto 10px;
padding: 5px;
text-transform: uppercase;
display: inline-block;
margin: 25px auto;
}

.element {
width: 200px;
margin: 5px;
float: left;
overflow: hidden;
position: relative;
color: #222;
background-color: #FFFFFF;
-webkit-box-shadow: 2px 2px 5px rgba(136, 136, 136, 0.8);
-moz-box-shadow:    2px 2px 5px rgba(136, 136, 136, 0.8);
box-shadow:         2px 2px 5px rgba(136, 136, 136, 0.8);
font-family: Helvetica Neue,Arial;
font-size: 10pt;
opacity: 0.7;
padding: 15px;  
}

p {
color: #333333;
font: 12px/16px Verdana,Geneva,Arial,Helvetica,sans-serif;
margin: 10px 0;
}

.element * {
position: absolute;
margin: 0;
}


.variable-sizes .element.width2 { width: 440px; }


.vanmij { background-color:#090;-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; color: #fff; opacity:1;}


.element img {
display: inline-block;
opacity: 1.0;
}



/**** Infinite Scroll ****/

#infscr-loading {
position: fixed;
text-align: center;
bottom: 30px;
left: 42%;
z-index: 100;
background: white;
background: hsla( 0, 0%, 100%, 0.9 );
padding: 20px;
color: #222;
font-size: 15px;
font-weight: bold;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
 border-radius: 10px;
}



/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Answer 1

好的，我只需删除.element * {position：absolute;保证金：0;来自样式表！

同位素元素不自动高度

1 个答案: