css 网格布局_CSS排除项和网格布局

最新推荐文章于 2024-10-01 23:20:42 发布

cundai5745

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量196

点赞数

文章标签：定位 css java html github

原文链接：https://rachelandrew.co.uk/archives/2016/03/16/css-exclusions-and-grid-layout/

版权

css 网格布局

There is a tiny little specification that originally started life linked to the Shapes specification, the original Exclusions and Shapes draft defined both shape-inside and shape-outside along with properties wrap-flow and wrap-through. These properties were to create Exclusions.

最初有一个很小的规范与Shapes规范相关联，最初的Exclusions和Shapes草稿定义了形状内和形状外以及属性包装流程和包装方式。这些属性用于创建排除项。

The Exclusions and Shapes specification was split. The shape-outside property went into Level 1 of CSS Shapes and is now implemented in some browsers. The shape-inside property, was moved to Level 2 of that module. The properties that create exclusions were moved to their own specification. At the current time the only browsers with support for exclusions are Internet Explorer 10, 11 and Edge.

排除和形状规格已拆分。 shape-outside属性进入CSS Shapes的1级，现在已在某些浏览器中实现。形状内部属性已移至该模块的级别2。创建排除的属性已移至其自己的规范。当前，仅有的支持排除功能的浏览器是Internet Explorer 10、11和Edge。

什么是排除？ (What is an exclusion?)

In CSS we can create text wrapped around elements by using floats. If we float an element left or right the following content will wrap around it. However there is no way to float an item right in the middle of some content with text flowing around it.

在CSS中，我们可以使用浮点数来创建环绕元素的文字。如果我们向左或向右浮动一个元素，则以下内容将围绕该元素。但是，没有办法在某些内容的中间浮动带有文本的项目。

This is what exclusions do.

这就是排除行为。

The specification doesn’t create a new method of positioning elements, so needs combining with a positioning method. It becomes especially interesting when combined with the upcoming CSS Grid Specification.

该规范并未创建新的定位元素方法，因此需要与定位方法结合使用。与即将发布的CSS Grid Specification结合使用时，它变得特别有趣。

In order to take a look I need to use Edge, and therefore the “old” prefixed version of CSS Grid which is implemented in that browser. I’ve added the new syntax as well. If you have IE 10, 11 or Edge then you can take a look at the CodePen examples I have linked.

为了看一眼，我需要使用Edge，因此需要使用在该浏览器中实现的CSS Grid的“旧”前缀版本。我还添加了新语法。如果您使用的是IE 10、11或Edge，则可以查看我链接的CodePen示例。

In the CodePen you can see that I have created a Grid on wrapper which has two child elements, the content in a div with a class of inner and an image which has a class of exclusion. The content I have stretched to cover the entire grid, but the image I have positioned on the grid, it will then sit on top of the content.

在CodePen中，您可以看到我在包装器上创建了一个网格，该网格具有两个子元素，一个div中的内容具有一个内部类，一个图像具有一个排除类。我拉伸的内容覆盖了整个网格，但是我定位在网格上的图像将位于该内容的顶部。

By setting wrap-flow: both on the image however it becomes an exclusion. The text knows it is there and flows round both sides of the item.

通过设置wrap-flow: both图像上的wrap-flow: both将被排除。文字知道它在那里，并在物品的两边流动。

View the CodePen for demo 1

查看演示的CodePen 1

You can get pretty creative with this.

您可以借此获得相当大的创意。

View the CodePen for demo 2

查看演示的CodePen 2

As a quick update to the original post here is an example of using media queries to change the display on viewport width. On narrow windows the exclusions insert the images into the content at full width, at wider windows we have content wrapped on the internal side and the image appearing pulled out of the content.

作为对原始帖子的快速更新，下面是一个使用媒体查询更改视口宽度显示的示例。在狭窄的窗口中，排除项将图像以全宽插入内容中，在较宽的窗口中，我们将内容包裹在内侧，并且图像看上去从内容中拉出。

All of the content is in one article, not broken up by the images in the source.

所有内容都在一篇文章中，而不是按源中的图像分类。

Here is the CodePen for the responsive example

这是响应式示例的CodePen

演示地址

网格和排除一起有意义 (Grid and Exclusions make sense together)

With CSS Grid we can use auto placement to position child elements each in a cell of the grid, enabling a display like this example.

借助CSS Grid，我们可以使用自动放置功能将每个子元素放置在网格的单元格中，从而实现类似于此示例的显示。

What the addition of exclusions would give us is the ability to define a grid and place items on it – be that images, content, perhaps advertising elements that we don’t want to actually break up an article to insert. Then flow content naturally around that.

排除项的添加将使我们能够定义网格并在其上放置项目-是图像，内容，也许是广告元素，而我们不想将其分解成要插入的文章。然后使内容自然地围绕该内容流动。

没有信号 (No signals)

Currently there appears to be no activity around Exclusions. You can see the Chrome Platform Status details here which also lists what other browser vendors and the development community are thinking about this feature. I think it is something we will find useful once Grid ships. I’d love to see other use cases and demos!

当前，在排除项附近似乎没有任何活动。您可以在此处查看“ Chrome平台状态”详细信息，该详细信息还列出了其他浏览器供应商和开发社区正在考虑的此功能。我认为这是Grid交付后我们会发现有用的东西。我希望看到其他用例和演示！