CSS网格中的浮动元素

问题描述

我当前正在处理我要使用CSS网格的第一个页面display: grid。

它工作得很好，但我遇到了一个小问题，我想要的元素float典型地是文本在图像、引号等周围浮动。

我只是给了一个元素afloat: left，令我惊讶的是，float被完全忽略了。该元素保留为完整的"grid-row-item"。

短码示例：

main {
  display: grid;
  grid-template-columns: 5% 5% 1fr 5% 5%;
}

main > * {
  grid-column: 3;
}

blockquote {
  grid-column: 2 / -2;
}

blockquote.float-left {
  grid-column: 3;
  float: left;
}

对于更大的示例，我创建了一个Codepen.

不幸的是，我还没有找到任何关于这方面的东西，所以我的问题是：有没有人能解决这个问题？我是不是忽略了什么？或者这可能还不可能？

提前感谢！：)

代码链接：

https://codepen.io/anon/pen/GQWPWX

推荐答案

您不能浮动网格项目。这样做将完全干扰网格布局。

如果要浮动元素，请将它们从网格布局中删除，将display: grid分配给其他一些中间元素，或者不使用网格布局。

这篇关于CSS网格中的浮动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！