Html 将div元素放置在彼此内部

页面两侧的div有一个奇怪的向下移动。绝对与相对和绝对定位有关。我听说过很多关于在使用位置时设置元素的宽度和高度：绝对和相对，但没有运气

是否有更好的方法将这些容器放置在彼此内部？同样，所有的填充和边距都是0px（在body标签中说明）

它应该是什么样子：

到目前为止我所做的：

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

    <div id="mid-section-container">
        <div id="monthly-leaderboard" class="apps-container">
            <div id="monthly-leaderboard-header" class="boards-container-nav">
                <h1>Monthly Leaderboard</h1>
            </div>
            <div id="monthly-content" class="apps-content-container">
                <div id="monthly-content-header" class="boards-content-nav">
                    <ul>
                        <li>Rank</li>
                        <li>User</li>
                        <li>Wins</li>
                    </ul>
                </div>
                <p>content goes here.</p>
                <p>and here.</p>
            </div>
        </div>

        <div id="tournament-board" class="apps-container">
            <div id="tournament-header" class="boards-container-nav">
                <ul>
                    <li><a href="#">Current</a></li>
                    <li><a href="#">Upcoming</a></li>
                </ul>
            </div>
            <div id="tourn-content" class="apps-content-container">
                <div id="tourn-content-header" class="boards-content-nav">
                    <ul>
                        <li>Platform</li>
                        <li>Torunament</li>
                        <li>Start Time</li>
                        <li>Teams</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

HTML:

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

    <div id="mid-section-container">
        <div id="monthly-leaderboard" class="apps-container">
            <div id="monthly-leaderboard-header" class="boards-container-nav">
                <h1>Monthly Leaderboard</h1>
            </div>
            <div id="monthly-content" class="apps-content-container">
                <div id="monthly-content-header" class="boards-content-nav">
                    <ul>
                        <li>Rank</li>
                        <li>User</li>
                        <li>Wins</li>
                    </ul>
                </div>
                <p>content goes here.</p>
                <p>and here.</p>
            </div>
        </div>

        <div id="tournament-board" class="apps-container">
            <div id="tournament-header" class="boards-container-nav">
                <ul>
                    <li><a href="#">Current</a></li>
                    <li><a href="#">Upcoming</a></li>
                </ul>
            </div>
            <div id="tourn-content" class="apps-content-container">
                <div id="tourn-content-header" class="boards-content-nav">
                    <ul>
                        <li>Platform</li>
                        <li>Torunament</li>
                        <li>Start Time</li>
                        <li>Teams</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

月度排行榜

等级
使用者
获胜

内容在这里

在这里






平台
托兰芒
开始时间
团队

请将以下css更新到现有css中。只需添加最大宽度：1250px；你想要的。和保证金：0自动

#mid-section-container {
    position: relative;
    height: 800px;
    width: 100%;
    background-color: white;
    max-width: 1250px;
    margin: 0 auto;
}

---

不必要地使用了

位置：绝对我已对您的代码进行了更改并删除了不需要的css


#中段集装箱{
位置：相对位置；
高度：800px；
宽度：100%；
背景色：白色；
显示器：flex；
}
.应用程序容器{
高度：617px；
背景色：黑色；
}
.货柜导航{
背景色：#363636；
边框底部：实心2px#25b6e6；
}
#每月排行榜标题{
高度：85px；
}
#锦标赛头球{
宽度：100%；
高度：85px；
}
.apps内容容器{
身高：80%；
利润率：0px 10px；
背景色：#252525；
边界半径：7px；
}
#锦标赛委员会{
宽度：70%；
}
#月度排行榜{
宽度：30%；
左边距：20px；
}






平台
托兰芒
开始时间
团队

月度排行榜

等级
使用者
获胜

内容在这里

在这里

试试这一个，它的帮助已满



#中段集装箱{
位置：相对位置；
高度：800px；
宽度：100%；
背景色：白色；
}
.应用程序容器{
位置：绝对位置；
高度：617px；
背景色：黑色；
}
#月度排行榜{
右：50px；
顶部：50px；
}
#锦标赛委员会{
宽度：800px；
顶部：50px；
左：50px；
}
.货柜导航{
背景色：#363636；
边框底部：实心2px#25b6e6；
}
#月度排行榜标题h1{
保证金：0；
填充：10px 10px；
颜色：#FFF；
}
#锦标赛头球{
宽度：100%；
}
.apps内容容器{
身高：80%；
利润率：0px 10px；
背景色：#252525；
边界半径：7px；
}
#月刊内容{
宽度：286px；
}
#图恩内容{
宽度：780px；
}
ulli{
显示：内联块；
宽度：自动；
}
ullia{
颜色：#FFF；
}
ulli{
颜色：#FFF；
}
#比赛头球乌尔利阿{
填充：10px 20px；
}
#tourn内容标题ul li{
填充：10px 20px；
}
#每月内容标题ulli{
填充：10px 20px；
}
#每月内容标题{
背景色：#404040；
边框右上角半径：10px；
边框左上半径：10px；
}
#图恩内容头{
背景色：#404040；
边框右上角半径：10px；
边框左上半径：10px；
}

月度排行榜

等级
使用者
获胜

内容在这里

在这里






平台
托兰芒
开始时间
团队

添加css

#mid-section-container{
    display:flex;
}
#monthly-leaderboard{
    width:70%;
    height:100%;
}
#tournament-board{
    width:30%;
    height:100%;
}

同时添加flex的相关属性
这可能是定位div的最佳方式
能否共享代码笔链接？感谢您的回复。我尝试过这个方法，但仍然存在容器顶部分离的问题。你介意解释一下“flex”在元素也是“绝对”的情况下的作用吗？flex容器会扩展项目以填充可用空间，或者收缩项目以防止溢出。阅读更多：哈哈，我很感激你为让它看起来一样而付出的额外努力！这绝对是我最接近修好它的地方了。如果您运行该代码，那么在#锦标赛标题的ul标记顶部似乎仍然有空白。我用m解决了这个问题