页面内容出现在侧边栏下

我正在用侧边栏创建html布局。但是我的标题和内容在下方出现，而不是旁边的。页面内容出现在侧边栏下

.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> \t \t

感谢

来源

2017-06-15 Ruth Young

你试过只是改变 '的位置是：相对的;'到'位置：绝对;'？就像在这个小提琴：https：//jsfiddle.net/khs8j3gu/ – Rubenxfd

@Rubenxfd这已经最好......但每个div的内容然后不与边界排队....它都在它下面.. –

你究竟是什么意思？边框与侧边栏略有不成比例？您可以通过添加边距来解决此问题。也许这是你需要的？ https://jsfiddle.net/khs8j3gu/2/ – Rubenxfd

您应该尝试将您的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/

祝你好运！

来源

2017-06-15 08:18:09 Rubenxfd

只需添加

#sidebar { 
    float:left; 
}

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

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

来源

2017-06-15 08:00:59 LKG

在我的布局上，这使得我的div内容出现在我的div之外......？标题和内容边框跨越整个页面，我的侧栏向下移动。 –

有点更清楚，请我不明白 – LKG

添加“display：inline-block;”到您要相互显示的元素。

来源

2017-06-15 08:04:11

我已经介绍了.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>

来源

2017-06-15 08:20:22 Gerard

页面内容出现在侧边栏下

回答

相关问题