Question

我正在学习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

Answer 1

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

Answer 2

因为您希望头部图像为＆＃34; float＆＃34;在按钮块上方，将它绝对放在中间位置：

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

然后将按钮块按照自然布局顺序放入容器中：bio，blog，portfolio，contact。然后你可以给它们浮动：左边有适当的边距，使它们相对于彼此正确定位。

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

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

2 个答案: