我正在学习 HTML 和 CSS，想为自己制作一个简单的投资组合模型页面，但我遇到了一个我无法弄清楚的布局问题。
![我的页面布局][1]:http://i.stack.imgur.com/EGsdM.png
想法是面部左侧和右侧的框应该处于相同的高度，但是由于我的代码中的某些内容不太正确，所以当我对右侧的框应用相同的边距时它们不会和左边的一个盒子。在这张照片上，通过不同的边距，我已经将它们调整到几乎正确的高度，但在更大的显示器上，差异更明显。
我的 HTML 代码:
<!doctype html>
<html>
<head>
<title>Martin Hirvesaar</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-type" content="text/html; charset=ut f-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="reset.css">
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<img id="name" src="IMG/name.png" alt="Martin-Hirvesaar" />
<img id="face" src="IMG/face.png" alt ="low-poly-face" />
<div class="button" id="bio"><p><a href="">bio</a></p></div>
<div class="button" id="portfolio"><p><a href="">portfolio</a></p></div>
<div class="button" id="blog"><p><a href="">blog</a></p></div>
<div class="button" id="contact"><p><a href="">contact me</a></p></div>
</div>
</body>
</html>我的CSS:
body{
background-color:#80edc3;
width:100%;
height: 100%;
}
a{
text-decoration: none;
color:black;
}
a:hover{
font-size: 1.3em;
}
#container{
width:100%;
height: 1000px;
position: relative;
margin: 0 auto;
}
#face{
height:750px;
width:400px;
margin: 5% auto 0 ;
display: block;
padding-bottom: 10%;
}
#name{
height:12%;
width: 75%;
margin:10% 20% 0 15%;
display: block;
}
.button{
height:20%;
width:35%;
display: block;
}
.button p{
font-family: 'Permanent Marker', cursive;
font-size: 2.5em;
position: relative;
display: block;
padding-top:15%;
padding-left:9%;
color:black;
}
#bio p{
padding-left: 20%;
display: block;
position: relative;
}
#bio{
margin-top: -50%;
margin-left: 20%;
background-color: #87BCEB;
}
#portfolio{
margin-top: 5%;
margin-left: 20%;
background-color: #FFCE8A;
}
#blog p{
float:right;
padding-right: 15%;
}
#blog{
margin-top: -32.5%;
margin-left:50%;
background-color: #FFAE8A;
}
#contact{
margin-top:5%;
margin-left:50%;
background-color: #E77D99;
}
#contact p{
float:right;
padding-right: 4%
}该网页在线:www.martinhirvesaar.com
最佳答案
因为您使用百分比作为边距，所以框会根据浏览器窗口的大小不断移动。如果您调整屏幕上窗口的大小，您可以看到这将如何变化。您可能希望使用固定像素数将它们保存在特定位置。 (比如 margin-top: -20px；例如)你的图像是固定大小的，而它周围的很多元素都在基于 % 移动。我会重做代码以将元素固定在图像周围的位置。然后，您可以使用 @media 查询为不同的屏幕调整大小。
关于html - HTML/CSS 中简单页面布局的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28383120/