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

我正在修改一个我计划在将来托管我的博客的基本网站，我不能设法让我的一个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;
}

把它放在。main:

vertical-align: top;

尝试使用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>

您可以将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;
}

相关内容

最新更新

热门标签：