Question

我的图片会调整到任何屏幕尺寸，但我的div不会。我用特定的顶部和左侧px编码我的div，以使它们居中并位于我特别想要它们的位置。我之所以这样做的原因之一是在我的一个部分中实现六边形网格，但没有代码和图片。

table { 
  border-collapse:separate; 
  border-spacing:0px; 
  margin-top: 52px;
  margin-bottom: 252px;
} 

#page2 {
  position: relative;
  top: 170px;
  left: 492px;
  width: auto;
  height: 900; 
}

#exhibit {
  position: absolute;
  top: -65px;
  font-size: 15px;
  color:#e9098a;
  font-family: 'ostrich_sansblack';
  letter-spacing: 12px;
  left: 144px;
}

#row2 {
  position:absolute;
  top: 69px;
  left: 64px;
}

#row3 {
  position:absolute;
  top: 190px;
  left: 0px;
}

#row4 {
  position:absolute;
  top: 310px;
  left: 64px;
}

#row5 {
  position:absolute;
  top: 430px;
  left: 0px;
}


<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<a id="home"></a>
<div class="img_responsive">
<img src="img/main.png" alt="Make Image responsive" />
</div>
<nav class="fixed-nav-bar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#students">Students</a></li>
<li><a href="#directions">Directions</a></li>
</nav>

<div id="page1">
<a id="about"></a>
<img src="img/aboutphoto.png" alt="Make Image responsive" />
</div>

<div id="page2">
<a id="students"></a>
<div id="exhibit">
<h1><u>Students Exhibiting</u></h1>
</div>
<table>
<tr>
<td><a href="student.html"><img src="img/test2.png" /></a></td>
<td><a href="student.html"><img src="img/test2.png" /></a></td>
<td><a href="student.html"><img src="img/test2.png" /></a></td>
<td><a href="student.html"><img src="img/test2.png" /></a></td>
<td><a href="student.html"><img src="img/test2.png" /></a></td>
<td><a href="student.html"><img src="img/test2.png" /></a></td>
</tr>
</table>

<table id="row2">
<tr>
<td><a href="student.html"><img src="img/test2.png" /></a></td>
<td><a href="student.html"><img src="img/test2.png" /></a></td>
<td><a href="student.html"><img src="img/test2.png" /></a></td>
<td><a href="student.html"><img src="img/test2.png" /></a></td>
<td><a href="student.html"><img src="img/test2.png" /></a></td>
</tr>
</table>

<table id="row3">
<tr>
<td><a href="student.html"><img src="img/test2.png" /></a></td>
<td><a href="student.html"><img src="img/test2.png" /></a></td>
<td><a href="student.html"><img src="img/test2.png" /></a></td>
<td><a href="student.html"><img src="img/test2.png" /></a></td> 
<td><a href="student.html"><img src="img/test2.png" /></a></td>
<td><a href="student.html"><img src="img/test2.png" /></a></td>
</tr>
</table>

如何调整重叠div到屏幕大小？

0 个答案: