我想将主体的右列分为两部分。目前，我只希望底部边框显示为轮廓，但无法使其正常工作。我要更改的是#map部分。
我尝试了几种不同的方法，但无法弄清楚，我可能只是错过了一些东西，但无法弄清楚是什么。
HTML代码：
<!DOCTYPE HTML>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.mainSect {
height: 200%;
background-color: #FEDB00;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5%;
opacity: .6;
position: relative;
margin-top: -12px;
border: 2px solid black;
}
#news {
position: absolute;
width: 70%;
height: 100%;
border-right: 2px solid black;
}
#map {
position: absolute;
width: 20px;
height: 20px;
margin-left: 600px;
border-bottom: 2px solid black;
}
</style>
<html>
<head>
<title>Waitemata FC - NEWS </title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="nav">
<a href="index.html">NEWS </a>
<a href="index.html">TEAMS
<ul class="subMenu">
<li>Juniors</li>
<li>Youth</li>
<li>Seniors</li>
</ul>
</a>
<a href="register.html">REGISTRATION </a>
<a href="gallery.html">GALLERY </a>
<a href="sponsors.html">SPONSORS </a>
<a href="about.html">ABOUT </a>
</div>
<div class="imgSect">
<img class="logo" src="img/logo.png" alt="Waitemata AFC Logo" />
<p class="name">WAITEMATA AFC </p>
</div>
<a href="https://www.facebook.com/WaitemataFootballClub/?fref=ts" target="_blank" id="facebookLink">FaceBook Page </a>
<div class="mainSect">
<div id="news">
</div>
<div class="map">
<p>test </p>
</div>
</div>
<footer>
</footer>
</body>
</html>
最佳答案
首先，要划分主体，您必须具有一个容器部分，并且在其中必须具有左右列，
例如：
<body>
<div class="container">
<div class="left-column"></div>
<div class="right-column">
<div class="column-header">
</div>
</div>
</div>
</body>
<style type="text/css">
body {
width: 100%;
height: auto;
}
.container {
width: 1200px;
/*for ex. height:auto;*/
padding-right: 20px;
padding-left: 20px;
}
.left-column {
width: 70%;
/*or in px;*/
height: auto;
float: left;
}
.right-column {
width: 30%;
height: auto;
float: left;
}
.column-header {
width: 100%;
height: 50px;
/*change it as you wish;*/
}
</style>
关于html - 如何获得右列的顶部以具有自己的div？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42873300/