在基本的html / css网站中正确对齐div元素
[英]Properly aligning div elements in a basic html/css site
问题描述
I am tinkering with a basic site I plan to host my blog on in the future and I cannot manage to get one of my div elements to align with the rest of the site properly. 
我正在修改一个计划将来托管博客的基本站点，但我无法设法使div元素之一与该站点的其余部分正确地保持一致。 I have linked to the project on CodePen below. 我已链接到下面的CodePen上的项目。 I cannot seem to eliminate the white space between .header and .main . 我似乎无法消除.header和.main之间的.main 。 I had thought simply making the display: inline-block and keeping the margin/padding/border small would do the trick but I am obviously mistaken. 我本来以为只是简单地进行display: inline-block并保持margin/padding/border较小将可以解决问题，但我显然错了。 Thoughts? 有什么想法吗？
http://codepen.io/Kpmfastball/pen/xOvBNB http://codepen.io/Kpmfastball/pen/xOvBNB
Below is the CSS for .main , the div class I am struggling with, and .heading , which is the div located right above it on the webpage. 下面是.main ，我正在苦苦挣扎的div类和.heading的CSS， .main是位于网页上方的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;
}
3 个解决方案
解决方案1
1 2016-09-05 19:46:14
只需将其放在.main中：
vertical-align: top;
解决方案2
0 已采纳 2016-09-05 19:46:11
try to use HTML5 tags and also why don't you use css frameworks like Bootstrap or Foundation ? 尝试使用HTML5标签，以及为什么不使用Bootstrap或Foundation这样的CSS框架？ it's a lot that you should do to make your website responsive. 要使网站具有响应能力，您应该做很多事情。 you're code was a little bit messy so i cleaned it up for you.. 您的代码有点混乱，所以我为您清理了代码。
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 AZ</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>
Hope it helps... 希望能帮助到你...
解决方案3
0 2016-09-05 19:51:23
you can add float:left; 您可以添加float:left; to class nav and class main , it will be like this: 要分类nav和class 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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.