HTML/CSS 中的简单页面布局问题答案

【问题标题】：Problems with a simple page layout in HTML/CSSHTML/CSS 中的简单页面布局问题
【发布时间】：2015-02-08 00:23:14
【问题描述】：

我正在学习 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 in em 不是百分比。

标签： html css layout

【解决方案1】：

因为您使用百分比作为边距，所以框会根据浏览器窗口的大小不断变化。如果您调整屏幕上的窗口大小，您可以看到这将如何变化。您想使用固定像素数将它们保存在特定位置。（例如margin-top：-20px；例如）您的图像是固定大小的，而它周围的许多元素都在基于%移动。我会重做代码以将元素固定在图像周围的位置。然后，您可以使用 @media 查询来调整不同屏幕的大小。

【讨论】：

但是根据不同的显示器和分辨率，这不会仍然会弄乱布局。在我将所有内容更改为百分比之前，在更大的显示器上情况更糟，因为几乎所有内容都不合适，因为 20 像素在 15 英寸笔记本电脑屏幕和 24 英寸台式机显示器上看起来非常不同。
我修改了答案以删除第一部分，因为我可能一直感到困惑。看起来您的页面布局围绕着一个固定大小的图像，周围有各种元素。您需要将它们修复到位，然后如果需要，我会使用媒体查询来调整不同的屏幕。

【解决方案2】：

由于您希望头部图像“浮动”在按钮块上方，因此将其绝对定位在中间：

# face {
    position: absolute;
    left: 50%;
    margin-left: -200px;
}

然后按照自然布局顺序将按钮块放入容器中：简历、博客、作品集、联系人。然后，您可以给它们 float: left 以适当的边距，以使它们相对于彼此正确定位。

然后使用边距将按钮容器定位在页面上您想要的位置。

【讨论】：