我有这个代码:
我希望侧边栏出现在主要内容的右侧,主要内容应居中。
我正在尝试设计此页面,以便主要内容位于页面的中央,并在边栏上显示垂直横幅广告。
有人可以帮忙吗? :)
谢谢。
这是 HTML:
<div id="header">
<div id="main">
<div id="inner">
</div>
</div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
还有 CSS:
body {
margin:0;
height:100%;
}
#header{
background-color:#f0f0f5;
padding-right:10px;
padding-left:10px;
font-family:Arial,
sans-serif;
font-size:14px
}
#main {
padding-bottom:20px;
margin:0 auto;
max-width:784px;
height:100%;
}
#inner {
border:1px solid #c9c9c9;
padding:20px 20px;
color:#44423c;
background-color:#fff
}
#sidebar {
width:200px;
}
#footer {
background-color:#d3d3d3;
padding-bottom:18px;
padding-top:18px;
margin:0 auto;
max-width:1030px
font:normal 14px/1em Arial, sans-serif;
color:#727272;
text-align:center;
clear: both;
}
最佳答案
将这些添加到您的代码中。 Example Fiddle
#sidebar {
float: right;
}
#inner {
float: left;
width: 584px;
}
此外,您应该更改代码以使用语义 html,例如:
<header>
</header>
<main>
<article>
</article>
<aside>
</aside>
</main>
<footer>
</footer>
在开始#main div 之前,您还需要结束#header div。
header<div id="header">Header</div>
<div id="main">
<div id="inner">
Inner Content
</div>
<div id="sidebar">
Sidebar Content
</div>
</div>
<div id="footer">Copyright Website Blah Blah </div>
关于css - 居中主要内容右侧的侧边栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34076857/