页面内容出现在侧边栏下
问题描述:
我正在用侧边栏创建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
感谢
答
您应该尝试将您的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/
祝你好运!
答
只需添加
#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>
+0
在我的布局上,这使得我的div内容出现在我的div之外......?标题和内容边框跨越整个页面,我的侧栏向下移动。 –
+0
有点更清楚,请我不明白 – LKG
答
添加“display:inline-block;”到您要相互显示的元素。
答
我已经介绍了.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>
你试过只是改变 '的位置是:相对的;'到'位置:绝对;'?就像在这个小提琴:https://jsfiddle.net/khs8j3gu/ – Rubenxfd
@Rubenxfd这已经最好......但每个div的内容然后不与边界排队....它都在它下面.. –
你究竟是什么意思?边框与侧边栏略有不成比例?您可以通过添加边距来解决此问题。也许这是你需要的? https://jsfiddle.net/khs8j3gu/2/ – Rubenxfd