Question

我正在创建一个带侧边栏的html布局。但是我的标题和内容在我的侧边栏下面下面显示而不是旁边的。

＆＃13;
＆＃13;
.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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

由于

Answer 1

添加“display：inline-block;”要显示在彼此旁边的元素。

Answer 2

添加

#sidebar {
    float:left;
}

＆＃13;

.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;
    float:left;
}

#header { border:1px solid #000; height:300px; 
    padding:10px; margin-left: 200px;
}
#content { border:1px solid #000; height:700px; margin-left: 200px;;
    padding:10px; 
}

＆＃13;

<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>

＆＃13;

Answer 3

您应该尝试将position: relative;更改为position: absolute;。然后，您可以使用边距调整div的位置。

HTML：

<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>

CSS：

.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; 
}

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

祝你好运！

Answer 4

我已经介绍了.inner-container并定义了两个flexbox。简化了CSS。

* {
  box-sizing: border-box;
}

.container {
  display: flex;
}

.inner-container {
  display: flex;
  flex-flow: column;
  width: 80%;
}

#sidebar {
  width: 20%;
  background: gray;
}

#header {
  border: 1px solid black;
  height: 300px;
  padding: 10px;
}

#content {
  border: 1px solid black;
  padding: 10px;
}

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

Answer 5

您应该尝试编辑

position: fixed

这将解决您的问题。

页面内容显示在侧边栏下方

5 个答案: