将div元素彼此定位

Question

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

是否还有更好的方法将这些容器相互放置，所有的填充和边距均为0px（在body标签中表示）。

应该是什么样子：！https://imgur.com/a/Yol1Kf8

到目前为止，我所做的是：！https://imgur.com/a/u4zU4iA

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：

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

Answer 1

尝试此操作即可获得完整的帮助

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

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

Answer 2

请将以下CSS更新为您现有的CSS。只需添加最大宽度：1250px;你要。和保证金：0自动；

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

Answer 3

prop-types不必要地使用了，我对您的代码进行了更改并删除了不需要的CSS。

position:absolute;

#mid-section-container {
    position: relative;
    height: 800px;
    width: 100%;
    background-color: white;
	display:flex;
}
.apps-container {
    height: 617px;
    background-color: black;
}


.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;
}
#tournament-board {
    width: 70%;
}
#monthly-leaderboard {
    width: 30%;
	margin-left:20px;
}

Answer 4

添加CSS

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

还添加 flex 的相关属性 也许这是定位div的最佳方法