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="/bg#">        
        <img src="image.png" />
    </a>
    <div class="image-overlay">
        <div class="overlay-buttons">
            <a href="/bg#">View</a>
            <a href="/bg#">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
Fiddle: jsfiddle.net/eecvpru5/2   -  person Nick Tucci    schedule 27.03.2015
comment
Изглежда има проблем с WebKit/Blink, (-webkit-)column-count и деца, които имат box-shadow, приложени към тях. Можете да намерите много проблеми, свързани с това (тук , тук, тук и т.н.). Опитайте да добавите margin: 2px към .dress-gallery. Въпреки че използването на това сравнително ново нещо ще ви причини повече главоболия, отколкото може да реши проблема. Също така изглежда borked във 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