可以在网格项目周围流动内容吗？

问题描述：

我奠定了一些内容与新的CSS布局网格模块。有几段是8列宽，我想补充一个figure这是宽3列，在1-3列，并且有它后面流入空间到figure右边的段落。可以在网格项目周围流动内容吗？

这可能吗？在非网格世界中，我只需简单地将float:left;添加到figure即可。这是我想模仿的行为。

我不知道在figure后面的段落会有多长，所以我不能说“下一个X段落占据4-8列”。

这里有一个CodePen of a stripped-down example。

.grid-container { 
 
    display:grid; 
 
    grid-template-columns: repeat(6, 1fr); 
 
    width: 50%; 
 
    border:1px solid #eee; 
 
    margin: 1em auto; 
 

 
} 
 

 
.grid-container p { 
 
    grid-column: 1/6; 
 
} 
 

 
.grid-container figure { 
 
    grid-column: 1/3; 
 
    background: rgba(155, 155, 255, 0.5); 
 
    margin:0; 
 
    padding: 1em; 
 
    
 
    /* Hoping this will be enough to make the paragraphs after the figure flow around it, but apparently not. */ 
 
    float:left; 
 
} 
 

 
figure img { 
 
    width: 100%; 
 
    height:auto; 
 
} 
 

 
figcaption { 
 
    margin-top:0.5em; 
 
}

<html> 
 
    <head> 
 
    <title>A Floating Grid Item?</title> 
 
    </head> 
 
    <body> 
 
    <div class="grid-container"> 
 
     <p>Fake Lipsum - is that even a real thing? Lipsi lipsum lipsooo doo.</p> 
 
     <figure> 
 
     <img src="http://38.media.tumblr.com/3a8dee9aae420a0048907c54ff701fc8/tumblr_n8m6qv50X11r238sko1_500.jpg" alt="A cat"> 
 
     <figcaption>I want the paragraph(s) below to flow around this box.</figcaption> 
 
     </figure> 
 
     <p>I want this to flow around the image. Please?</p> 
 
     <p>It would be great if this would flow too, if it's not naturally below the image because of the amount of text.</p> 
 
     <p>Again, it would be great if this would flow too, if it's not naturally below the image because of the amount of text.</p> 
 
     <p>Yet again, it would be great if this would flow too, if it's not naturally below the image because of the amount of text.</p> 
 
     
 
    </div> 
 
    </body> 
 
</html>

请发表你试过的代码。如果我们能够重现问题，我们可以更有效地帮助您。 –

@Michael_B刚刚添加了一个链接到一个精简的codepen。 –

答

要围绕图流中的文本。进入一个div，然后流动无花果。

<html> 
<head> 
<title>A Floating Grid Item?</title> 
</head> 
<body> 
<div class="grid-container"> 
    <p>Fake Lipsum - is that even a real thing? Lipsi lipsum lipsooo doo.</p> 
    <figure> 
    <img src="http://38.media.tumblr.com/3a8dee9aae420a0048907c54ff701fc8/tumblr_n8m6qv50X11r238sko1_500.jpg" alt="A cat"> 
    <figcaption>I want the paragraph(s) below to flow around this box.</figcaption> 
    </figure> 

    <div class="text"> 
    <p>I want this to flow around the image. Please?</p> 
    <p>It would be great if this would flow too, if it's not naturally below the image because of the amount of text.</p> 
    <p>Again, it would be great if this would flow too, if it's not naturally below the image because of the amount of text.</p> 
    <p>Yet again, it would be great if this would flow too, if it's not naturally below the image because of the amount of text.</p> 
    </div> 
    </div> 
    </body> 
    </html>

使用这个CSS

.text {grid-column: 3/6;float:left;}

这有点儿工作 - 它可能是最好的答案 - 但我的最终目标是让文本，一旦它的如下图所示的水平，走在它下面为好，这样的数字是由文字环绕。 –

答

按照CSS Grid Specificationfloat对电网项目没有任何影响，所以我不认为有做到这一点的好办法。

Keshav的回答是最好的方法，使得在figure旁边的短段落并不意味着下一段落将落在figure之下。

如果我们可以肯定的是立即的身影之后的一段足够长，通过上图我们可以做这样的事情与CSS：

figure { grid-column: 2/4; } 
figure + p { grid-column: 5/10; }

但它不警惕有差距段落之间紧随之后的是figure和段落，既不解决方案使正下方的figure文本流。

可以在网格项目周围流动内容吗？

相关推荐