Обрезка столбцов CSS

Как вы можете видеть на изображении внизу, столбец обрезается.

http://jsfiddle.net/eecvpru5/2/

Вот мой код:

.dress-gallery {
    position: relative;
    background: #FEFEFE;
    border: 2px solid #FAFAFA;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin-top: 1em;

    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
    -moz-column-break-inside: avoid; /* Firefox */
    column-break-inside: avoid; /* IE 10+ */

    .price {
        font-size: 0.8em;
        padding-left: 0.5em;
        font-weight: bold;
        color: #333;
    }

    .retailer {
        font-size: 0.8em;
        margin: 0.15em 0.5em;
        clear: both;
    }

    .list-count {
        padding-left: 0.5em;
        font-size: 0.8em;
    }

    .list-name {
        font-size: 0.8em;
        margin: 0.15em 0.5em;
        clear: both;
    }
}

.dress-gallery:hover .image-overlay {
    display: block;
}

.image-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    display: none;
    text-align: center;
}

HTML:

<div class="dress-gallery" style="-webkit-column-break-inside:avoid;">
    <a href="#">        
        <img src="image.png" />
    </a>
    <div class="image-overlay">
        <div class="overlay-buttons">
            <a href="#">View</a>
            <a href="#">Buy</a>
        </div>
    </div>

    <span class="price">$127.00 USD</span>
    <span class="retailer pull-right">Revolve Clothing</span>
</div>

Я нашел решение изменить .dress-gallery для отображения в виде встроенного блока. Но поскольку для наложения изображений необходимо, чтобы положение галереи платьев было относительным, оно не будет правильно расположено.

введите здесь описание изображения


html css multiple-columns
person Nick Tucci    schedule 23.03.2015    source источник
comment
Извините, но не понимаю, что вы имеете в виду, когда столбец обрезается. Вы можете уточнить?   -  person Joe Conlin    schedule 23.03.2015
comment
@JoeConlin Как вы можете видеть, нижняя часть изображения обрезана и перенесена в начало следующего столбца.   -  person Nick Tucci    schedule 24.03.2015
comment
Ааа, теперь я понял. К сожалению, трудно помочь, не видя html, чтобы увидеть, что именно обрезается. Можете ли вы опубликовать Fiddle или предоставить ссылку на то, где это происходит. Должно быть легкое исправление, когда-то увиденное.   -  person Joe Conlin    schedule 24.03.2015
comment
Извините за поздний ответ, но я разместил html.   -  person Nick Tucci    schedule 24.03.2015
comment
пожалуйста, дайте скрипку или ручку   -  person MMachinegun    schedule 26.03.2015
comment
Скрипт: jsfiddle.net/eecvpru5/2   -  person Nick Tucci    schedule 27.03.2015
comment
Кажется, это проблема с WebKit/Blink, (-webkit-)column-count и дочерними элементами, к которым применяется box-shadow. Вы можете найти много проблем, связанных с этим (здесь , здесь, здесь и т. д.). Попробуйте добавить margin: 2px к .dress-gallery. Хотя использование этого относительно нового материала доставит вам больше головной боли, чем решит проблему. Также выглядит скучно в Firefox.   -  person maryisdead    schedule 27.03.2015
comment
Используете ли вы какие-то препроцессоры CSS (Sass/Less)?   -  person Konrud    schedule 27.03.2015
comment
@maryisdead Маржа, казалось, ничего не делала.   -  person Nick Tucci    schedule 27.03.2015
comment
@Konrud, да, я использую SASS.   -  person Nick Tucci    schedule 27.03.2015
comment
@Adherence, вы пытались уменьшить количество столбцов?   -  person Konrud    schedule 27.03.2015
comment
@Konrud Количество столбцов тоже не изменилось. Ответ, опубликованный Phlume, - это решение, которое я использовал. Спасибо всем за вашу помощь.   -  person Nick Tucci    schedule 27.03.2015

Ответы (1)


arrow_upward
2
arrow_downward

Попробуйте удалить зазор между столбцами и перейти к модели flexbox:

http://jsfiddle.net/eecvpru5/4/

css

#column-gallery {
padding: 1em 2em;
background-color: #efefef;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
outline: none;

Я использовал упомянутую скрипку из @maryisdead, и это привело меня сюда:
Тень блока обрезана в столбцах CSS в Chrome

Из того, что вопросы приняли ответ, я использовал их скрипку:
http://jsfiddle.net/danield770/KxYRc/19/

Когда я скопировал это в ваше на FF, это, похоже, сработало. Вам все равно придется подстраиваться под свои конкретные нужды и размер изображения, но обертки больше нет.

person Phlume    schedule 26.03.2015
comment
Он может избавиться от обрезки, но не помещает его в столбцы. - person Nick Tucci; 27.03.2015