Question

我正在尝试使用左侧边栏和居中标题设计布局。我在包装器div中有标题和侧边栏，以便它们可以在页面上居中，但我希望侧边栏位于标题的左侧，如此屏幕截图 enter image description here

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

这是我的HTML和CSS（注意：我有一个保证金：0自动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;

}

Answer 1

在这里：http://jsfiddle.net/WMYmV/1/

改变风格：

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

使用CSS定位左侧边栏

1 个答案: