出现在侧边栏下方的页面内容 [英] Page content appearing underneath sidebar
本文介绍了出现在侧边栏下方的页面内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在创建一个带有侧边栏的 html 布局.但是我的标题和内容出现在我的侧边栏下方而不是旁边.
.container { position:relative;填充:10px;顶部:0px;右:0;左:0;高度:1200 像素;}#侧边栏{位置:相对;顶部:0;底部:0;左:0;宽度:200px;高度:1000px;背景:灰色;}#header { 边框:1px 实心 #000;高度:300px;填充:10px;左边距:200px;}#content { 边框:1px 实心 #000;高度:700px;margin-left: 200px;;填充:10px;}
<div id="侧边栏"><a href="#">链接1<div id="标题"><h2 class="title">标题</h2><h3>标题内容</h3>
<div id="内容"><中心><p>你好</p></中心>
谢谢
解决方案
您应该尝试将 position:relative;
更改为 position: absolute;
.然后,您可以使用边距调整 div 的位置.
.container {位置:相对;填充:10px;顶部:0px;右:0;左:0;高度:1200px;}#侧边栏{位置:绝对;顶部:0;底部:0;左:0;宽度:200px;高度:1000px;背景:灰色;}#header { 边框:1px 实心 #000;高度:300px;填充:10px;左边距:200px;边距顶部:-10px;}#内容 {边框:1px 实心 #000;高度:700px;左边距:200px;填充:10px;}
<div id="侧边栏"><a href="#">链接1<div id="标题"><h2 class="title">标题</h2><h3>标题内容</h3>
<div id="内容"><中心><p>你好</p></中心>