出现在侧边栏下方的页面内容 [英] Page content appearing underneath sidebar

查看：39
本文介绍了出现在侧边栏下方的页面内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在创建一个带有侧边栏的 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></中心>

工作小提琴:https://jsfiddle.net/khs8j3gu/2/

祝你好运！

I am creating a html layout with a sidebar. But my header and content are appearing underneath my sidebar instead of next to it.

.container { position:relative; padding:10px; top:0px; right: 0; left: 0; height: 1200px;}
#sidebar {
    position:relative;
    top:0; bottom:0; left:0;
    width:200px;
    height: 1000px;
    background: gray;
}

#header { border:1px solid #000; height:300px; 
    padding:10px; margin-left: 200px;
}
#content { border:1px solid #000; height:700px; margin-left: 200px;;
    padding:10px; 
}

<div class="container">
  <div id="sidebar">
      <a href="#"> Link1 </a>
  </div>
  <div id="header">
    <h2 class="title">Title</h2>
    <h3>Header content</h3>
  </div>
  <div id="content">
    <center>
      <p>Hello</p>
    </center>
  </div>
</div>

Thanks

解决方案

You should try to change your position: relative; to position: absolute;. You can then adjust the position of your divs using a margin. 

.container { 
  position:relative;
  padding:10px;
  top:0px;
  right: 0;
  left: 0;
  height: 1200px;
 }
 
#sidebar {
    position:absolute;
    top:0; bottom:0; left:0;
    width:200px;
    height: 1000px;
    background: gray;
}
    
#header { border:1px solid #000; height:300px; 
    padding:10px; margin-left: 200px;
    margin-top:-10px;

}

#content {
  border:1px solid #000;
  height:700px;
  margin-left: 200px;
  padding:10px; 
}

<div class="container">
  <div id="sidebar">
      <a href="#"> Link1 </a>
  </div>
  <div id="header">
    <h2 class="title">Title</h2>
    <h3>Header content</h3>
  </div>
  <div id="content">
    <center>
      <p>Hello</p>
    </center>
  </div>
</div>

Working fiddle: https://jsfiddle.net/khs8j3gu/2/

Good luck!

这篇关于出现在侧边栏下方的页面内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆