Неожиданный разрыв между столбцами с элементами с абсолютным позиционированием

Я пытаюсь сделать строку с 3 столбцами, чтобы иметь эффект наведения, показывающий описание элемента.

В Google Chrome при наведении курсора на первый элемент между вторым и третьим столбцом появляется зазор. В Mozilla Firefox происходит то же самое, когда вместо трех столбцов 4 или 2, между двумя последними элементами появляется пробел.

Разметка

<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/


html css absolute multiple-columns
person Lucas Ferreira    schedule 04.04.2014    source источник
comment
Странный. В Опере пробелов нет.   -  person OptimusCrime    schedule 04.04.2014
comment
@Lucas: Теперь тебе не нужен этот пробел, а?   -  person JEYASHRI R    schedule 04.04.2014
comment
Вот в опере есть пробел, когда 4 столбца. Может быть, это как-то связано с ретина-дисплеем?   -  person Lucas Ferreira    schedule 04.04.2014
comment
jsfiddle.net/jeyashri_shri/q5z4B/4   -  person JEYASHRI R    schedule 04.04.2014
comment
Возможно, я недостаточно ясно выразился, пример   -  person Lucas Ferreira    schedule 04.04.2014
comment
возможный дубликат Пробел между div и img?   -  person Hardik Sondagar    schedule 04.04.2014

Ответы (2)


arrow_upward
1
arrow_downward

Проблема в том, что 33,333333% вы используете в качестве ширины. Браузеру требуется некоторое время, чтобы вычислить «100%» от «33,33333%», которые необходимы изображению для заполнения контейнера.

Возможно, если вы измените ширину изображения на 100,1% вместо 100%, это может сработать.

person Alvaro Menéndez    schedule 04.04.2014
comment
Работал почти идеально. Промежутки как раз проявляются при переходе со второго пункта на третий, так что при переходе его практически невозможно заметить. Решил мою проблему. - person Lucas Ferreira; 04.04.2014

arrow_upward
1
arrow_downward

Просто добавьте эти свойства CSS в элемент .image.

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

Проверьте JSFiddle.

person Hardik Sondagar    schedule 04.04.2014
comment
При наведении курсора на первую колонку не появляется зазор между 2 и 3 колонками? - person Lucas Ferreira; 04.04.2014