居中固定宽度页面内容

我很迷茫，甚至在哪里开始，所以我会尽力解释。我正在为Aptana Studio中的定期项目创建一个五金商店，并在Google Chrome中运行该网站。显然，在谷歌浏览器中运行一个网站会使其自动响应？正如你可以在下面的截图看到，该网站固定在左侧和响应右侧：居中固定宽度页面内容

（调整1）

（调整2）

（调整大小3）

（调整4）

当然，黑白照片不调整，但我其实并不希望它。我只想要标题（徽标和照片）中的内容保持相同大小 - 保持固定在页面上。以Ace Harware的网站为例：http://www.acehardware.com/home/index.jsp

该网站中的所有内容都受限于某些维度。当页面完全打开时，内容居中，两边都有空白区域。而当页面被调整大小（较小）时，页边距开始消失，直到最后有一个截止点 - 并且内容不再改变位置。

（整版）

（第一调整）

（第二缩放 - 即使页面较小，内容是固定的）

这正是我试图用我的五金店网站做的。我如何达到这个效果？我听说过bootstrap，但我真的不知道它或我会使用哪个模板。感谢您的任何帮助/ adivce。如果这里解释太复杂，请将我发送给您可能知道的一个很好的教程。

来源

2015-10-09 HappyHands31

您应该让所有事情都能随着移动设备的普及而做出反应。使用像引导程序这样的框架来完成脚手架和布局的基础知识，将使所有设备尺寸的一切工作良好，并节省您的时间。 Bootstrap非常简单，所以我首先查看文档并从那里开始。 http://getbootstrap.com/getting-started/ – Psyco430404

你想要做什么（至少，我了解的）不是“响应”的问题。你只是试图保持整个页面内容始终居中。（acehardware.com不响应eather）。

你只需要为主div（将包含整个页面内容，除背景之外）定义一个恒定的宽度，然后将它保持在外部div中居中，而不管屏幕大小。

这是你应该做的事情：

#main-wraper { 
 
    margin-top: 5px; 
 
    margin-bottom: 5px; 
 
    width: 360px; 
 
    height: 420px; 
 
    position: relative; 
 
    left: 50%; 
 
    margin-left: -180px; 
 
    background-color: white; 
 
    color: black; 
 
} 
 

 
#outter-div { 
 
    background-color: grey; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: auto; 
 
    min-height: 100%; 
 
    overflow: hidden; 
 
}

<div id='outter-div'> 
 
    <div id='main-wraper'> 
 
     <!-- The whole page content --> 
 
    </div> 
 
</div>

这将保持在父容器中心的DIV，和父容器会被隐藏在屏幕越小。

我在代码片段中使用了较小尺寸的main-wrapper，以便更容易在较小的盒子中观看效果。你应该使用自己的宽度。请记住，该div的“左边距”必须具有“div的一半宽度”作为负值。 “左：50％”将始终居中并保持效果。

来源

2015-10-10 00:29:33

是的，这正是我想要做的！不幸的是，当我尝试它时，一切都消失了...... https://jsfiddle.net/HappyHands31/tbx8kunL/1/ 任何想法出了什么问题？ – HappyHands31

每个DIV都必须位于“body”标签内...... –

居中固定宽度页面内容

回答

相关问题