gpt4 book ai didi

html - 使用 CSS 定位左侧边栏

转载 作者:行者123 更新时间:2023-11-28 11:57:50 25 4
gpt4 key购买 nike

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

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

这是我的 HTML 和 CSS(注意:我有一个 margin: 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;

}

最佳答案

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

更改样式:

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

关于html - 使用 CSS 定位左侧边栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20024956/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com