在基本的html / css網站中正確對齊div元素
[英]Properly aligning div elements in a basic html/css site
問題描述
我正在修改一個計划將來托管博客的基本站點，但我無法設法使div元素之一與該站點的其余部分正確地保持一致。 我已鏈接到下面的CodePen上的項目。 我似乎無法消除.header和.main之間的.main 。 我本來以為只是簡單地進行display: inline-block並保持margin/padding/border較小將可以解決問題，但我顯然錯了。 有什么想法嗎？
http://codepen.io/Kpmfastball/pen/xOvBNB
下面是.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
嘗試使用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 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>
希望能幫助到你...
解決方案3
0 2016-09-05 19:51:23
您可以添加float:left; 要分類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;
}
對齊 div 元素（css、html）
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.