Question

我制作了一个仪表板，我在左侧的项目名称中间有一个标识。链接到右边。我使用了绝对值来将所有这些值放在一行上。它是在屏幕分辨率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>&nbsp;&nbsp;&nbsp;<?php echo ucwords($_SESSION['usr_name']); ?></font>&nbsp;&nbsp;&nbsp;<a href="changepswd.php" style="text-decoration:none;">Change Password</a>&nbsp;&nbsp;&nbsp;<a href="logout.php" style="text-decoration:none;">Logout</a>&nbsp;&nbsp;&nbsp;<a href="UserManual.pdf" target="_blank" style="text-decoration:none;">Help</a></div>

Answer 1

创建主分区并将此代码放在主分区中。将主分区的主机设置为100％style = "width:100%; height:"as you want";。自动调整所有分辨率的百分比。

Answer 2

将所有元素放入子header元素并放入父display: inline-block元素中。然后，您可以使用#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; }将它们全部显示在同一行。

编辑：让我们从正确的结构开始。您需要一个分为3个部分的标题，所有标题都显示在同一行上。这可以通过以下方式实现：

<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>

{{1}}

这将创建一个跨越页面整个宽度的标题，除非窗口大小小于1000px，在这种情况下它保持在宽度1000px并且滚动条将出现在底部。

它有两个小部分，至少250px宽，总是25％的完整标题。

它中间还有一个大的部分，宽度至少为500px，总是标题的50％

如何在1行中设置全部

2 个答案: