我的内容与边栏重叠。如果您查看侧边栏容器的边距和填充,您会发现我不得不尝试了很多方法,包括调整位置,但没有任何效果 -
***示例屏幕截图: http://tinyurl.com/cefamyt
***工作示例 http://www.bestthrillermovielist.com/indextest.php#topofpage
还有 当我将侧边栏容器设置为设定高度时,比如 4000px;而不是我目前的方式,没有电影内容重叠到边栏中。我试图让侧边栏容器拉伸(stretch)整个窗口的高度,但无济于事
一旦边栏内容结束,#movieinfo 中的内容就会与边栏中的内容重叠。 #sidebarcontainer 上的边距/填充允许侧边栏扩展到屏幕的完整长度,但由于某种原因,#movieinfo 内容会滑动到侧边栏内容结束位置的右下方。
CSS:
#container {
max-width:90%;
margin-left:auto;
margin-right:auto;
margin-top:25px;
overflow:hidden;
}
#movieinfo {
padding-right:375px;
margin-top:25px;
display:inline;
position:relative;
}
#sidebarcontainer {
float: right;
width:345px;
background:#fff;
margin-bottom: -5000px;
padding-bottom: 5000px;
height:100%;
position:relative;
}
#movieright {
float:right;
width:340px;
height:100%;
}
#movierightcontainer {
float:right;
width:100%;
margin-bottom:8px;
margin-top:0px;
height:100%;
padding: 0 2%;
}
.movienav {
width: 320px;
height: 430px;
float: left;
margin-right: 20px;
position: relative;
display:inline;
margin-top:25px;
margin-bottom:45px;
}
HTML
<div id="container">
<div id="movieinfo">
<?php include("sidebar.php");?>
<div class="movienav"></div>
</div>
</div>
***SIDEBAR.php***
<div id="sidebarcontainer">
<div id="movierightcontainer">
<div id="movieright"></div>
</div>
</div>
感谢任何帮助。
最佳答案
问题是您将所有内容都放在 #container
左列而不是右列需要一个单独的 div。电影海报与右栏重叠,因为右栏向右浮动并且不再有内容。这就是为什么向右列添加高度有效。
我已经创建了一个 jsfiddle 中需要发生的事情的简化版本。我把海报变小了,这样更容易在预览窗口中查看。但这个概念是正确的。
关于html - 内容重叠侧边栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15210736/