在调整浏览器窗口大小的同时自动减小容器宽度

如果用大屏幕打开页面，则会在两侧看到两个空列，随着缩小浏览器宽度逐渐减小。

我要重现此行为，但不能让它直到结束：我已经设置初始宽度的容器类80％，有些点感谢媒体查询CSS中以成为100％：

@media screen and (max-width: 1047px) { 
    .container { 
    width:100%;}}

我想念的是这个容器的逐渐减少。如何制作？

非常感谢您

2017-08-31 naufragio

到目前为止似乎是正确的，但是如果没有看到更多的代码，我们无法真正说出。请发布您的HTML（至少是它的简化版本）以及任何其他与容器大小和位置有关的CSS。 – cjl750

我可能已经表达得很糟糕。我发布的代码有效，但我不知道如何重现网站的行为。我的容器突然（在1047px）从80％通过到100％。我想要的是，我不知道该怎么做，因为我减少了浏览器的宽度（如在真实网站中所做的那样），从80％逐渐过渡到100％。谢谢！ – naufragio

如果您指的是灰色边框/背景区域正在缩小，则它们在内容区域上也只有最大宽度。 – abney317

对于这样的经历，你需要的是这样的：

.container { 
    max-width: 1200px; 
    margin-right: auto; 
    margin-left: auto; 
}

如果.container应用于块级元素（如<div>），那么这个元素自然尽可能宽。这只是说不要超过1200px，并指定左侧和右侧之间的空间。

如果由于某种原因该元素不是块级别（例如<span>），那么只需将display: block;添加到上面的代码中以使其成为块级别。

2017-08-31 16:23:30 fredrivett

回答