css：列計數3，圖像浮動跨越2，chrome不播放。爲什麼？

我需要3列的佈局，圖像跨越右上角的2。發現幾個解決方案，這裏最好的一個： Advanced CSS tricks: How to span an image over multiple columns in a CSS3 site layout?css：列計數3，圖像浮動跨越2，chrome不播放。爲什麼？

但：兩者都不適用於Chrome。消極的頂邊讓文本消失在一個不可發現的東西后面。我用浮標的絕對定位的解決方案，因爲在另一個解決方案浮動的左邊緣將是文字變得不可見的原因...

我用div＃浮動來表示圖像，具有相同的效果。

HTML：

<div id="outer"> 

    <div id="floater"> 
    </div> 

    <div id="inner"> 
    <h1>Title1</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    <h1>Title2</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    <h1>Title3</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 

</div>

而且CSS代碼：

#outer{ 
    position: relative; 
    font-size: 10pt; 
    width: 100vw; 
    min-height: 88vh; 
    column-count: 3; 
    column-gap: 1vw; 
    padding-top: 54vw; 
    background-color: red; 
    } 
#outer #floater{ 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 66vw; 
    height: 50vw; 
    margin-bottom: 2vw; 
    display: block; 
    border: 2px solid blue; 
} 
#outer #inner{ 
    max-width: 100vw; 
    background-color: green; 
    margin-top: -11vw; 
}

我做了一個小提琴，在Chrome '標題1' diappears，在Safari和Firefox沒有問題。有什麼建議麼？ https://jsfiddle.net/20drzb3k/5/

來源

2017-10-20 Daniela

你可以試試backface-visibilty來治癒這個視覺錯誤。

#outer #inner > *{ 
    backface-visibility:hidden; 
    }

https://jsfiddle.net/20drzb3k/7/

有關的相關信息，這是一個不同的方法的另一個例子（僞元素被拉起第一個山坳內容。https://codepen.io/gc-nomade/pen/boZaVJ

來源

2017-10-20 14:27:50

謝謝！你知道爲什麼背面能見度是影響該？ – Daniela

我只知道這種錯誤在Chrome中經常被用這種方式處理（3d＆transform有很多）。 –

css：列計數3，圖像浮動跨越2，chrome不播放。爲什麼？

回答

相關問題