定心固定宽度的布局，同时保持最小宽度滚动

我工作的一个图形密集的布局，所以要保持文件的大小下来，我限制了布局1600像素宽度固定。定心固定宽度的布局，同时保持最小宽度滚动

1600个像素的，最重要的内容落在中心1230

我试图找到一种方法，在浏览器中居中布局，同时保持内容的滚动内。

当浏览器窗口是小于1600像素

#page{margin: 0 auto;}

该解决方案使得内容左侧可达作为浏览器的宽度变得更小此解决方案不居中。

#page{position: absolute; width: 1600px; top: 0; left: 50%; margin-left: -800px; }

感谢您的任何帮助。

来源

2014-02-18 christian

该解决方案解决了无法访问的内容的问题。

如果你有以下结构

#wrap.constrained > #layout > #content.constrained

可以使用约束类水平都通过侧边设置为“自动”既#wrap和＃内容限制到所需的宽度和中心。

然后，您可以定位#layout绝对，拥有它是大于.constrained，并使用左侧定位和负左边距的组合居中的问候#wrap。

下面是一个例子：http://jsfiddle.net/caKA7/

来源

2014-02-20 22:52:27 christian

我不知道你需要限制宽度以像素为单位。它不是跨移动设备的便携式设备，目前尚不清楚你为什么这么做。但是，如果要将1600px的1230像素区域居中，则可以使用尺寸为(1600-1230)/2的固定宽度边距。

更灵活的解决方案，是柔性盒可接受的技术？如果是这样，他们使这个任务变得微不足道。让页面容器：

display: flex; 
    flex-direction: column; 
    width: 100%; 
    align-items: center;

然后让你的项目

flex: 0 0 auto

或设置一个特定的宽度，而不是auto。

来源

2014-02-18 18:22:56

解决方案，具有更广泛的支持将是我认为比较好，看http://caniuse.com/flexbox – Nit

六个月前，我会同意，但在这一点柔性盒受所有主流浏览器支持，并且有两个版本。 –

我同意你的看法，如果不是因为http://theie9countdown.com/ – Nit

如果你想在一个包装比的元素小到中心的元素，你可以使用absolute：

#page{ 
     position: absolute; 
     width: 1600px; 
     top: 0; 
     left:-100%; 
     right:-100%; 
     margin-left: auto; 
     margin-right: auto; 
    }

例如：http://jsfiddle.net/pavloschris/T5d8W/

来源

2014-02-18 20:38:11 xpy

只要你知道，这打破如果内部元件的尺寸比规定外一个的大小。 – Nit

我不明白你的意思，在这个例子中，内部元素的大小大于外部大小的大小，它似乎工作正常，除非我不明白某些东西。 – xpy

对不起，我没有完全解释。一旦宽度超过父边的100％，即在内部宽度大于150像素的样本中，它会断裂。 – Nit

定心固定宽度的布局，同时保持最小宽度滚动

回答

相关问题