1
我正在學習HTML和CSS，並想爲自己製作一個簡單的項目組合樣機頁面，並且我遇到了一個我無法弄清楚的佈局問題。HTML/CSS中簡單頁面佈局的問題
[我的頁面佈局] [1]：http://i.stack.imgur.com/EGsdM.png
的想法是，在臉部和右側的左側箱應該是在同一高度，但由於東西在我的代碼是不完全正確，當我對右側的方框和左側的方框應用相同的邊距時，它們不會出現。通過不同邊緣的這張照片，我已經將它們變得非常到了正確的高度，但是在更大的顯示器上，差異更加明顯。
我的HTML代碼：
<!doctype html>
<html>
\t <head>
\t \t <title>Martin Hirvesaar</title>
\t \t <meta charset="UTF-8" />
\t \t <meta http-equiv="Content-type" content="text/html; charset=ut \t \t \t f-8" />
\t \t <meta name="viewport" content="width=device-width, initial-scale=1" />
\t \t <link rel="stylesheet" href="style.css">
\t \t <link rel="stylesheet" type="text/css" href="reset.css">
\t \t <script type="text/javascript" \t src="jquery-1.11.2.min.js"></script>
\t \t <link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
\t </head>
\t <body>
\t \t <div id="container">
\t \t \t <img id="name" src="IMG/name.png" alt="Martin-Hirvesaar" />
\t \t \t <img id="face" src="IMG/face.png" alt ="low-poly-face" />
\t \t \t <div class="button" id="bio"><p><a href="">bio</a></p></div>
\t \t \t <div class="button" id="portfolio"><p><a href="">portfolio</a></p></div>
\t \t \t <div class="button" id="blog"><p><a href="">blog</a></p></div>
\t \t \t <div class="button" id="contact"><p><a href="">contact me</a></p></div>
\t \t </div>
\t </body>
</html>我的CSS：
body{
\t background-color:#80edc3;
\t width:100%;
\t height: 100%;
}
a{
\t text-decoration: none;
\t color:black;
}
a:hover{
\t font-size: 1.3em;
}
#container{
\t width:100%;
\t height: 1000px;
\t position: relative;
\t margin: 0 auto;
}
#face{
\t height:750px;
\t width:400px;
\t margin: 5% auto 0 ;
\t display: block;
\t padding-bottom: 10%;
}
#name{
\t height:12%;
\t width: 75%;
\t margin:10% 20% 0 15%;
\t display: block;
}
.button{
\t height:20%;
\t width:35%;
\t display: block;
}
.button p{
\t font-family: 'Permanent Marker', cursive; \t \t \t \t \t \t \t \t \t \t \t \t \t \t
\t font-size: 2.5em;
\t position: relative;
\t display: block;
\t padding-top:15%;
\t padding-left:9%;
\t color:black;
}
#bio p{
\t padding-left: 20%;
\t display: block;
\t position: relative;
}
#bio{
\t margin-top: -50%;
\t margin-left: 20%;
\t background-color: #87BCEB;
\t
}
#portfolio{
\t margin-top: 5%;
\t margin-left: 20%;
\t background-color: #FFCE8A;
}
#blog p{
\t float:right;
\t padding-right: 15%;
}
#blog{
\t margin-top: -32.5%;
\t margin-left:50%;
\t background-color: #FFAE8A;
}
#contact{
\t margin-top:5%;
\t margin-left:50%;
\t background-color: #E77D99;
}
#contact p{
\t float:right;
\t padding-right: 4%
}的網頁在線上：www.martinhirvesaar.com
在'em'中嘗試'margin-top'不是百分比。 – Hareesh 2015-02-07 14:33:05