Question

我之前从未遇到过这个问题，已经在线研究但没找到任何东西。我想我在这里缺少一些基本的东西......

这是我的HTML：

<ul>
    <li>
        <figure>
            <img src="xyz1">
        </figure>
    </li>
        <figure>
            <img src="xyz2">
        </figure>
    </li>
    <li>
        <figure>
            <img src="xyz3">
        </figure>
    </li>
    <li>
        <figure>
            <img src="xyz4">
        </figure>
    </li>
    <li>
        <figure>
            <img src="xyz5">
        </figure>
    </li>
    <li>
        <figure>
            <img src="xyz6">
        </figure>
    </li>
</ul>

这是我的CSS：

img {
    max-width:100%;
    height:auto;
}
ul{
    width:100%;
    margin:0;
    padding:0;
}
ul li{
    width:33.3%;
    float:left;
    list-style:none;
}
ul, li, figure{
    margin:0; padding:0;
}

我的图片尺寸都相同。问题是我的img都缩小到344px的高度，而我的li标签缩小到348px，这导致每个li标签底部有4px的间隙。

我在这里缺少什么？

提前感谢您的帮助！

Answer 1

问题是你的li高度比宽度大。您的实际图像的宽度和高度为195 x 195（px）。因为您将img高度设置为auto，所以它使用相同的宽度。

示例：如果li宽度为200且高度为210，则img宽度为200，高度为200（自动），间距为10像素

您的解决方案是将li的高度设置为宽度的高度。如果您只是使用定义的宽度（以像素为单位），我们会在高度上设置相同的数量，但由于您使用的是百分比，我们可以在加载jQuery时执行此操作：

修改：真正的解决方案是将line-height设置为0.代码已更新。

＆＃13;

ul {
  width: 100%;
  padding: 0;
}

ul li{
  width: 33.3%;
  float: left;
  list-style: none;
  line-height: 0;
}

img {
  max-width: 100%;
  height: auto;
}

figure, ul, li {
  margin: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>
        <figure>
            <img src="http://orig08.deviantart.net/630c/f/2013/230/f/9/sir_raccoon_esquire__dick_figures__by_jonathankrapat-d6io7ax.jpg">
        </figure>
    <li>
        <figure>
            <img src="http://orig08.deviantart.net/630c/f/2013/230/f/9/sir_raccoon_esquire__dick_figures__by_jonathankrapat-d6io7ax.jpg">
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://orig08.deviantart.net/630c/f/2013/230/f/9/sir_raccoon_esquire__dick_figures__by_jonathankrapat-d6io7ax.jpg">
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://orig08.deviantart.net/630c/f/2013/230/f/9/sir_raccoon_esquire__dick_figures__by_jonathankrapat-d6io7ax.jpg">
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://orig08.deviantart.net/630c/f/2013/230/f/9/sir_raccoon_esquire__dick_figures__by_jonathankrapat-d6io7ax.jpg">
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://orig08.deviantart.net/630c/f/2013/230/f/9/sir_raccoon_esquire__dick_figures__by_jonathankrapat-d6io7ax.jpg">
        </figure>
    </li>
</ul>

＆＃13;

顺便说一下，为了确保您的帖子有以下CSS：

ul, li, figure {
    margin:0: padding:0;
}

注意margin:0:末尾有冒号而不是分号。确保将CSS放在单独的行上以避免这些错误。

Answer 2

它可能没什么区别，但看起来你的第一个li标签在第二行到最后一行之前没有关闭，你能将最后一个/ li移动到第一个标签附近吗？

编辑：您是否尝试过将高度：100％添加到您的ul li选择器？

编辑：根据弗拉基米尔的建议，您可以尝试：

.figurecontainer {
    display: flex;
    flex-direction: row;
}


<div class="figurecontainer">
    <span class="item"><img src="xyz" /></span>
    <span class="item"><img src="xyz" /></span>
    <span class="item"><img src="xyz" /></span>
</div>

Answer 3

您需要使用flex css属性（您将不会遇到任何问题）

Answer 4

从figure

删除保证金

figure{     
  margin:0;
  }

img {
    max-width:100%;
    height:auto;

}
figure{     
  margin:0;
  }
ul{
    width:100%;
    margin:0;
    padding:0;
}
ul li{
    width:33.3%;
    float:left;
    list-style:none;
}
li{
  width:100%;
}

<ul>
    <li>
        <figure>
            <img src="http://orig08.deviantart.net/630c/f/2013/230/f/9/sir_raccoon_esquire__dick_figures__by_jonathankrapat-d6io7ax.jpg">
        </figure>
    <li>
        <figure>
            <img src="http://orig08.deviantart.net/630c/f/2013/230/f/9/sir_raccoon_esquire__dick_figures__by_jonathankrapat-d6io7ax.jpg">
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://orig08.deviantart.net/630c/f/2013/230/f/9/sir_raccoon_esquire__dick_figures__by_jonathankrapat-d6io7ax.jpg">
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://orig08.deviantart.net/630c/f/2013/230/f/9/sir_raccoon_esquire__dick_figures__by_jonathankrapat-d6io7ax.jpg">
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://orig08.deviantart.net/630c/f/2013/230/f/9/sir_raccoon_esquire__dick_figures__by_jonathankrapat-d6io7ax.jpg">
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://orig08.deviantart.net/630c/f/2013/230/f/9/sir_raccoon_esquire__dick_figures__by_jonathankrapat-d6io7ax.jpg">
        </figure>
    </li>

</ul>

Answer 5

我认为你必须在你的代码中尝试重置属性，这将删除默认边距＆amp;填充。尝试将图像的最小宽度等于100％

的 CSS

* { margin:0; padding:0; } img { min-width:100%; height:auto; }

https://jsfiddle.net/z7juhmby/1/

响应<li>不缩小包含图像的大小

5 个答案: