使用 CSS 定位左侧边栏答案

【问题标题】：Position left sidebar with CSS使用 CSS 定位左侧边栏
【发布时间】：2013-11-17 07:01:25
【问题描述】：

我正在尝试设计一个带有左侧边栏和居中标题的布局。我在包装 div 中有页眉和侧边栏，以便它们可以在页面上居中，但我希望侧边栏在页眉的左边一点，就像这个截图

我怎样才能做到这一点？现在，当我重新调整窗口大小时，侧边栏不会跟随标题。任何帮助将不胜感激，我仍在学习 CSS。谢谢。

这是我的 HTML 和 CSS（注意：我有一个边距：0 auto 0 15px 用于导航但将其取出）：

<body>
<div id="wrapper">
    <header>

    </header>

    <nav>
        <ul>

        </ul>
    </nav>
</div>

    body {
    margin:0;
    padding: 5px;
    background-color: #121212;
}

#wrapper {
    margin:0 auto 0 auto;
    width:1024;
}

header {
    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);

    /* Opera */ 
    background-image: -o-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0C0DA6), color-stop(1, #0E0B58));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to bottom, #0C0DA6 0%, #0E0B58 100%);

    width: 768px;
    height:100px;
    border-radius: 4px;
    border: 2px solid #adadad;
    margin:0 auto 0 auto;
}

nav {
    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);

    /* Opera */ 
    background-image: -o-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0C0DA6), color-stop(1, #0E0B58));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to bottom, #0C0DA6 0%, #0E0B58 100%);

    width:230px;
    height:235px;
    border-radius: 4px;
    border: 2px solid #adadad;

}

【问题讨论】：

请创建fiddle 以更快地获得帮助。
这里是小提琴：jsfiddle.net/WMYmV
以下解决方案对您有用吗？如果是，您应该将答案标记为已接受，以便它在问题页面上显示为已解决。

标签： html css sidebar

【解决方案1】：

给你：http://jsfiddle.net/WMYmV/1/

改变风格：

header {
    width: 538px; //(768px - width of sidebar)
    margin: 0 auto 0 230px;
}

【讨论】：

它有效，谢谢。当我调整窗口大小时，有没有办法让侧边栏和标题居中？
您的页眉和侧边栏有固定的宽度。将它们置于中心是什么意思？如果可用宽度变小，您只会得到一个水平滚动条。
我的意思是侧边栏和标题的尺寸不会改变，而是让它们都在页面上居中。这就是我将它们放在包装器 div 中的意图。编辑：nvm 我让它工作，只需要调整我的包装器 div 的宽度。再次感谢您。