具有绝对定位元素的列之间出现意外间隙答案

【问题标题】：Unexpected gap between columns with absolute positioned elements具有绝对定位元素的列之间出现意外间隙
【发布时间】：2014-05-16 17:33:48
【问题描述】：

我正在尝试制作一条包含 3 列的行，以显示项目描述的悬停效果。

在 Google Chrome 上，当我将鼠标悬停在第一项时，第二列和第三列之间会出现间隙。在 Mozilla Firefox 上，当它是 4 或 2 列而不是 3 列时会发生同样的情况，间隙出现在最后两个项目之间。

标记

<div class="row row-3">
    <div class="column">
        <img src="http://placehold.it/800x650" alt="" class="image" />
        <div class="info">
            <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div><!-- .info -->
    </div><!-- .column -->

    <div class="column">
        <img src="http://placehold.it/800x650" alt="" class="image" />
        <div class="info">
            <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div><!-- .info -->
    </div><!-- .column -->

    <div class="column">
        <img src="http://placehold.it/800x650" alt="" class="image" />
        <div class="info">
            <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div><!-- .info -->
    </div><!-- .column -->
</div><!-- .row -->

CSS

body {
    font: normal 0.7em sans-serif; }
.row {
    width: 100%; }
.image {
    max-width: 100%; }
.info {
    background: rgba(0, 0, 0, .5);
    color: #FFF;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all .3s linaer;
    width: 100%;

    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear; }
.column:hover .info {
    opacity: 1; }
}
.column {
    position: relative; }
.row-3 .column {
    float: left;
    width: 33.333333%; }

我做了一个小提琴来展示这个问题：http://jsfiddle.net/q5z4B/1/

【问题讨论】：

很奇怪。 Opera 中没有空白。
@Lucas：现在你不想要那个空白了啊？
这里有 4 列的时候，opera 中有一个间隙。也许它与视网膜显示有关？
jsfiddle.net/jeyashri_shri/q5z4B/4
也许我不够清楚，example

标签： html css multiple-columns absolute

【解决方案1】：

只需将此 CSS 属性添加到 .image 元素

    .image
    {
     margin: 0;
     padding: 0;
     display: block;
    }

查看JSFiddle

【讨论】：

当您将鼠标悬停在第一列时，它不会在第 2 列和第 3 列之间出现间隙？

【解决方案2】：

问题是您用作宽度的 33.333333%。浏览器需要一些时间来计算图像需要填充容器的“33.33333%”的“100%”。

如果您将图像宽度更改为 100.1% 而不是 100%，它可能会起作用

【讨论】：

工作得几乎完美。当我从第二项更改为第三项时，差距只会显示出来，因此在过渡时几乎不可能注意到。解决了我的问题。