Question

我正在修改一个基本网站，我计划将来托管我的博客，我无法让我的div元素之一与网站的其他部分正确对齐。我已经链接到下面的CodePen项目。我似乎无法消除.header和.main之间的空白区域。我曾想过只是制作display: inline-block并保持margin/padding/border小就可以做到这一点，但我显然是错的。想法？

http://codepen.io/Kpmfastball/pen/xOvBNB

以下是.main的CSS，我正在努力的div类，以及.heading，它位于网页正上方的div。

.main {
  display: inline-block;
  height: 800px;
  width: 82%;
  margin: 1px;
  padding: 1px;
  border-width: 1px;
  font-family: times;
  background-color: #29BA91;
}

.heading {
  display: block;
  font-family: times;
  width: auto;
  height: 150px;
  border-width: 1px;
  border-color: black;
  margin: 1px;
  padding: 1px;
  background-color: #0F8CB2;
  color: #ffffff;
}

Answer 1

把它放在.main：

vertical-align: top;

Answer 2

尝试使用HTML5标记以及为什么不使用Bootstrap或Foundation等css框架？为了使您的网站具有响应能力，您应该做很多事情。你的代码有点乱，所以我为你清理了..

h1 {
	font-size: 50px;
	text-align: left;
}

HEADER {
	display: block;
	font-family: times;
	width: auto;
	height: 150px;
	border-width: 1px;
	border-color: black;
	margin: 1px;
	padding:1px;
	background-color: #0F8CB2;
	color: #ffffff;
	
}

MAIN{
    display: flex;
    justify-content: space-between;
}

.nav {
	display: flex;
    width: 200px;
	font-family: times;
	height: 900px;
	border-width: 1px;
	border-color: black;
	margin: 1px;
	padding: 1px;
	background-color: #0A6D37;
	color: #ffffff;

}
.main {
	display: flex;
    flex:1;
	height: 900px;
	margin: 1px;
	padding: 1px;
	border-width: 1px;
	font-family: times;
	background-color: #29BA91;
}
.link1 {
	color: #ffffff;

}

<html>
<head>
	<title>A-Not-So-Well-Respected Man Blog</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<header>
		<h1 style="padding: 5px; border: 5px; margin: 5px">A-Not-So-Well-Respected Man</h1>
		<h5>Random Thoughts and Musings</h5>
	</header>	
  <main>
    <div class="nav">
      <h3 align="center">Menu</h3>
      <ul>
        <li>Posts A-Z</li>
        <li>Posts By Tag</li>
        <li>Newest Posts</li>
        <li>About Me</li>
      </ul>
    </div>
    <div class="main">
      <a class="link1" href="https://anotsowellrespectedman.wordpress.com/2016/02/14/love-and-brutality-a-history-of-february-14th/">Latest blog post</a>
    </div>
  </main>
</body>
</html>

希望它有所帮助...

Answer 3

您可以将float:left;添加到课程nav和课程main，它会是这样的：

.nav {
    display: inline-block;
    font-family: times;
    width: 200px;
    height: 900px;
    border-width: 1px;
    border-color: black;
    margin: 1px;
    padding: 1px;
    background-color: #0A6D37;
    color: #ffffff;
    float:left;
    }
.main {
    display: inline-block;
    height: 800px;
    width: 82%;
    margin: 1px;
    padding: 1px;
    border-width: 1px;
    font-family: times;
    background-color: #29BA91;
    float:left;

}

在基本的html / css站点中正确对齐div元素

3 个答案: