我做了一个仪表板，我在左边的项目名称在中间&链接到右边。我用了绝对值把它们都放在一行上&在分辨率为1366 x 768的屏幕上做的。但当我在分辨率为1024 x 768的屏幕上检查时，它重叠了。请帮助。
<style>
#heading{ text-align:right;font-size: 20px;float:right;margin:50px 20px;}
#img{ margin:10px 10px; }
</style>
<body>
<a href="homepage.php"><img id="img" src="LOGO.jpg" width="150px" height="100px"></a>
<h1 align="center" style="position:absolute;top:30px; left:500px;">MEETING ROOM DETAILS</h1>
<div id="heading"><a href="homepage.php" style="text-decoration:none;">Home</a> <?php echo ucwords($_SESSION['usr_name']); ?></font> <a href="changepswd.php" style="text-decoration:none;">Change Password</a> <a href="logout.php" style="text-decoration:none;">Logout</a> <a href="UserManual.pdf" target="_blank" style="text-decoration:none;">Help</a></div>
将所有元素放入子header-section元素和父header元素中。然后，您可以使用display: inline-block将它们全部显示在同一行。
编辑:让我们从正确的结构开始。您需要将标题分成3部分，所有部分都显示在同一行上。这可以使用以下命令来实现:
#header
{
width:100%;
min-width: 1000px;
height: 100px;
font-size: 0px;
}
.small-section
{
min-width: 250px;
width: 25%;
height: 100px;
display: inline-block;
font-size: 14px;
vertical-align: top;
text-align: center;
}
.large-section
{
min-width: 500px;
width: 50%;
height: 100px;
display: inline-block;
font-size: 14px;
vertical-align: top;
text-align: center;
}<div id="header">
<div class="small-section" style="background: rgb(255,0,0);">LOGO</div>
<div class="large-section" style="background: rgb(0,255,0);">TITLE</div>
<div class="small-section" style="background: rgb(0,0,255);">LINKS</div>
</div>这将创建一个页眉，它将跨越整个页面的宽度，除非窗口大小小于1000px，在这种情况下，它将保持在1000px的宽度，滚动条将出现在底部。
它有两个小的部分，宽度至少为250px，并且总是占整个头部的25%。
它在中间也有一个大的部分，宽度至少为500px，并且始终是整个header的50%
创建主部门并将此代码放在主部门中。设置主分区的白色和高度为100% style = "width:100%; height:"as you want";。自动调整所有分辨率的百分比