html – 将div元素定位在彼此内部

2023年12月10日 202次阅读

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

有没有更好的方法将这些容器定位在彼此内部,所有填充和边距都是0px(在正文标记中说明).

应该是什么样的：！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>

最佳答案 尝试这一个它是完整的帮助

	
#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>
点赞