Question

问题是锂元素太高了。您可以看到列表元素具有灰色背景。你可以在图像下看到灰色。

问题是。为什么li元素高于图像？

我需要li元素与图像具有相同的高度。

html

<div id="content">
    <ul id="references-all" class="references">
        <li data-id="online">
            <img src="http://s1.directupload.net/images/140627/779m36rh.jpg" 
                 width="324" height="240" class="references-images">
            <div class="description">
                <img src="http://s14.directupload.net/images/140627/z49aajek.png">
                <div>
                    <p>Lorem Ipsum Lorem</p>
                    <img src="http://s1.directupload.net/images/140627/g8yce4ta.png" 
                         width="28" height="27" class="description-arrow">
                </div>
            </div>  
        </li>      
    </ul>
</div>

CSS

 #content .references {
     margin-bottom: 50px;
     max-width: 980px;
     width: 100%;
 }


 #content .references li {
     background-color: darkgrey;
     float: left;
     margin: 1px;
     max-width: 404px;
     min-width: 225px;
     overflow: hidden;
     position: relative;
     width: 33%;
 }
 #content .references li:hover > .description{
     background-color: #78785a;
     height:100px;
 }
 #content .references li .references-images {
     height: auto;
     width: 100%;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
 }

.description {
     bottom: 0;
     color: #ffffff;
     display: block;
     height: 50px;
     overflow: hidden;
     padding: 7px 0 0 5px;
     position: absolute;
     -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
     -ms-transition: all 0.5s ease-in;
          -o-transition: all 0.5s ease-in;
         transition: all 0.5s ease-in;
     width: 100%;
}

.description p {
    color: #ffffff;
    display: block;
    float: left;
    font-size: 0.800em;
    margin: 0;
    padding-bottom: 15px;
    padding-top: 10px;
    width: 85%;
-webkit-transition: all 0.5s ease-in;
   -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
     -o-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in;
}


.description .description-arrow {
    float: left;
    margin-top: 10px;
}

Answer 1

li的高度大于img，因为img的布局类似于inline-block，它位于img的底部边缘到文本的基线，导致文本下延器出现间距。在您的情况下，您只需将vertical-align属性添加到img元素即可删除图片下方的空格：

img { vertical-align:top; }

JSFiddle

Answer 2

在display:block和<li>

上设置<img>

#content .references li {
   display:block;
}

#content .references li .references-images {
   display:block;
}

的 Fixed Fiddle

li元素宽度图像在里面 - li高度错误

2 个答案:

JSFiddle