css：列数3，图片浮动跨越2，chrome不玩。为什么？ [英] css: column-count 3, image floating spanning 2, chrome not playing. why?

问题描述

我需要3列的布局，右上角有跨越2的图像。找到几个解决方案，最好的一个在这里：

但是， ：两者都不适用于Chrome。消极的顶边让文本消失在一个不可发现的东西后面。
我使用了浮点数绝对定位的解决方案，因为在另一个解决方案中，浮动点的左边距将成为文本变得不可见的原因...

我使用div＃float来表示图片，效果相同。

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。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor in renhenderit 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。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor in renhenderit 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。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor in renhenderit 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; 
宽度：100vw; 
 min-height：88vh; 
列数：3; 
 column-gap：1vw; 
 padding-top：54vw; 
背景颜色：红色; 
} 
 #outer #floater {
 position：absolute; 
 right：0; 
 top：0; 
 width：66vw; 
身高：50vw; 
 margin-bottom：2vw; 
 display：block; 
 border：2px纯蓝色; 
} 
 #outer #inner {
 max-width：100vw; 
 background-color：green; 
 margin-top：-11vw; 
} 
  

我在Safari浏览器中使用了Chrome'Title 1'diappears， Firefox没问题。有什么建议么？
https://jsfiddle.net/20drzb3k/5/

解决方案

您可以试试 backface-visibilty 来治愈这个视觉错误。 p>

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

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

对于infos，下面是另一个不同的例子方法（伪元素拉起第一个内容。 https://codepen.io/gc- nomade / pen / boZaVJ

I need layout with 3 columns with an image spanning across 2 in top right corner. Found several solutions, best one here: Advanced CSS tricks: How to span an image over multiple columns in a CSS3 site layout?

But: Both don't work with Chrome. The negative top-margin makes the text disappear behind a non discoverable something. I used the solution with the absolute positioning of the floater, as in the other solution the left margin of the floater would be a reason why the text becomes invisible...

I used div#floater to represent the image, has same effect.

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>

And the CSS code:

#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;
}

I made a fiddle, in Chrome 'Title 1' diappears, in Safari and Firefox no problem. Any suggestions? https://jsfiddle.net/20drzb3k/5/

解决方案

You can give a try to backface-visibilty to cure that visual bug.

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

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

For infos, Here is another example with a different approach (a pseudo element is pulling up first col content. https://codepen.io/gc-nomade/pen/boZaVJ

这篇关于css：列数3，图片浮动跨越2，chrome不玩。为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！