调整页面大小后，放置可变宽度网格 [英] Centering a variable-width grid after resizing the page

问题描述

这里是我想在CSS中做什么的图片：
image a>。

任何想法？

解决方案

这可以防止 margin：0 auto; 的通常解决方案成为一个选项。

更大问题

没有未使用的空间在其容器中

如果一个元素的宽度由内容的宽度决定，则称为收缩包装。如果内容在大小上改变，则元素的宽度也改变。这是内联，内联块或浮动元素的默认行为。

当收缩包装的父内容包裹到下一行时，父类停止收缩包装;它现在占据了自己的容器的全宽。从技术上讲，父节点是居中的，因为它完全填充了容器，但它的内容不居中。除非父母具有明显的bg颜色或壁纸图片，否则父类似乎不会居中。

这也适用于一些更高级的功能，例如CSS3 flexbox，显然阻止了它作为一个选项。

解决方案

媒体查询

事实证明有一个简单的CSS解决方案。基本问题是这种单个布局网格不能支持宽范围的屏幕尺寸，并且仍然使内容居中。但是，在 CSS3媒体查询的帮助下，可以创建各种布局网格，

例如，创建具有1列的布局网格，以及一个具有2列的布局网格，以及一个具有3列的布局网格列等等，对于可能需要的尽可能多的列。无论哪个网格适合当前的屏幕大小，那是使用的。布局网格可能是相同的，除了给定的每个固定宽度，宽度只是足够大以适应列数。由于每个网格都有固定的宽度，因此使用 margin：0 auto; 水平居中。

换句话说，不是试图强制单个布局处理所有浏览器大小，创建许多布局，并选择一个可以轻松处理当前浏览器大小的布局。

Here is an image of what I want to do in CSS: image.

Any ideas?

解决方案

Initial issue

Centering an element that has no explicit width

This prevents the usual solution of margin: 0 auto; from being an option.

Greater issue

There's no unused space for centering the wrapper in its container

An element is said to be shrink-wrapped if its width is determined by the width of its content. If the content changes in size, the width of the element changes likewise. This is the default behavior for elements that are inline, inline-block, or floated.

When content in a shrink-wrapped parent wraps around to the next row, the parent stops being shrink-wrapped; it now occupies the full width of its own container. Technically, the parent is centered, since it completely fills the container, but its content is not centered. And unless the parent has a noticeable bg color or wallpaper image, the parent will appear to not be centered either.

This also applies to some of the more advanced features, like CSS3 flexbox, apparently preventing that from being an option as well.

Solution

Media queries

It turns out there is a simple CSS solution. The basic issue is that a single layout grid of this sort can't support a wide range of screen sizes and still center the content. But with the help of CSS3 media queries, a variety of layout grids can be created, with the appropriate one chosen based on the screen size.

For example, a layout grid with 1 column is created, as well as one with 2 columns, and one with 3 columns, and so forth, for as many columns as may be needed. Whichever grid fits the current screen size, that's the one that's used. The layout grids might be identical except for the fixed width each one is given, a width that's just large enough to fit the number of columns. Since each grid has a fixed width, it becomes trivial to center them horizontally using margin: 0 auto;.

In other words, rather than trying to force a single layout to handle the full range of browser sizes, create many layouts, and choose the one that can easily handle the current browser size.

这篇关于调整页面大小后，放置可变宽度网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！