Question

我使用新的CSS网格布局模块布置了一些内容。有几个段落宽度为8列，我想在第1-3列中添加一个{3}宽3列的SET @counter = 1; WHILE (@counter < 2) DO SELECT @counter; @counter = @counter + 1; END WHILE，然后让它后面的段落流入到空间中figure的权利。

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

我不知道figure后面的段落会有多长，所以我不能说＆＃34;接下来的X段占据4-8列。＆＃34;

这里是here。

＆＃13;

figure

＆＃13;

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

＆＃13;

Answer 1

你想要在无花果周围流动的文字。进入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;}

Answer 2

根据CSS Grid Specification float对网格项没有影响，所以我认为没有一种方法可以实现这一点。

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

如果我们可以确定紧跟图后面的段落足够长以通过图形我们可以用CSS做这样的事情：

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

但它并不能防止紧跟figure之后的段落与之后的段落之间存在差距，并且两种解决方案都不允许文本在figure下面流动。

可以在Grid-Item周围传播内容吗？

2 个答案: