页面两侧的div有一个奇怪的向下移动.绝对与相对和绝对定位有关.在使用position时,我已经听过很多关于设置元素宽度和高度的信息：绝对和相对,但没有运气.
有没有更好的方法将这些容器定位在彼此内部,所有填充和边距都是0px(在正文标记中说明).
CSS：
#mid-section-container {
position: relative;
height: 800px;
width: 100%;
background-color: white;
}
.apps-container {
position: absolute;
height: 617px;
background-color: black;
}
#monthly-leaderboard {
right: 50px;
top: 50px;
}
#tournament-board {
width: 800px;
top: 50px;
left: 50px;
}
.boards-container-nav {
background-color: #363636;
border-bottom: solid 2px #25b6e6;
}
#monthly-leaderboard-header {
height: 85px;
}
#tournament-header {
width: 100%;
height: 85px;
}
.apps-content-container {
height: 80%;
margin: 0px 10px;
background-color: #252525;
border-radius: 7px;
}
#monthly-content {
width: 286px;
}
#tourn-content {
width: 780px;
}
HTML：
Monthly Leaderboard
- Rank
- User
- Wins
content goes here.
and here.
最佳答案 尝试这一个它是完整的帮助
#mid-section-container {
position: relative;
height: 800px;
width: 100%;
background-color: white;
}
.apps-container {
position: absolute;
height: 617px;
background-color: black;
}
#monthly-leaderboard {
right: 50px;
top: 50px;
}
#tournament-board {
width: 800px;
top: 50px;
left: 50px;
}
.boards-container-nav {
background-color: #363636;
border-bottom: solid 2px #25b6e6;
}
#monthly-leaderboard-header h1{
margin: 0;
padding: 10px 10px;
color: #FFF;
}
#tournament-header {
width: 100%;
}
.apps-content-container {
height: 80%;
margin: 0px 10px;
background-color: #252525;
border-radius: 7px;
}
#monthly-content {
width: 286px;
}
#tourn-content {
width: 780px;
}
ul li {
display: inline-block;
width: auto;
}
ul li a{
color: #FFF;
}
ul li {
color: #FFF;
}
#tournament-header ul li a{
padding: 10px 20px;
}
#tourn-content-header ul li{
padding: 10px 20px;
}
#monthly-content-header ul li{
padding: 10px 20px;
}
#monthly-content-header{
background-color: #404040;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
#tourn-content-header{
background-color: #404040;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
扫一扫
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
