gpt4 book ai didi

html - 调整浏览器大小时如何防止 div 元素移动?

转载 作者:太空宇宙 更新时间:2023-11-04 00:15:31 25 4
gpt4 key购买 nike

我正在为一项学校作业制作一个网站,但是当我调整屏幕大小并使其变宽一点时,div 元素离开了它们的位置。

我怎样才能避免这种情况?

大部分div是:

.menu {
padding-top:120px;
position:absolute;
color:white;
font-size:28pt;
font-weight:Bolder;
}

我的 html:

<body id="BODY" class="BDNL" onResize="MOSTRA()"> 
<div id="resizing" class="">
<div id="intro" class="divintro">
<p id="p" class="comeco">Trabalho Interdisciplinar Orientado:</p>
<p id="texto" class="txtcomum">
Trabalho no qual um grupo deve elaborar um site que <br />
relacione todas as matérias técnicas estudadas.
</p>
</div>
<form>
<div id="menu" class="menu">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="index.html"><label>RECO</label></a>
&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;
<a href=""><label>LOCO</label></a>
&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;
<a href=""><label> LP1</label></a>
&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;
<a href=""><label> LP2</label></a>
&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;
<a href=""><label> INFO</label></a>
</div>
</form>
</div>
</body>

最佳答案

您可能想查看 min-widthwidth CSS 的属性。


好的。您的 HTML 看起来很乱。首先,为了您自己的眼睛,请开始缩进您的代码。

<html>
<head>
<title>Page title</title>
</head>
<body class="BDNL" onResize="MOSTRA()">
<div id="resizing">
<div class="menu">
<a href="index.html">RECO</a>|
<a href="other.html">LOCO</a>|
[--]
</div>
<div id="intro">
<p>
<h1>Trabalho Interdisciplinar Orientado</h1>
[..]
</p>
</div>
</div>
</body>
</html>

这是实现所需结构所需的最小 HTML 源代码。你到底为什么要使用 position:absolute;.menu 上,我想您希望它位于实际内容之上?我移动了.menu#intro 之上容器。

使用以下 CSS 实现您可能想要的结果:

.menu {
margin: 0 0 30px 0; /* bottom margin 30px */
}

.menu a {
margin: 0 20px; /* left, right margin 20px; top, bottom 0 */
}

还有

  • 请决定您是要在元素上使用类还是 ID,在大多数情况下您不需要两者,
  • 摆脱多余的类和 ID(<p class="p"><p id="p"> 没有意义),
  • 为您的内容使用适当的 html 元素。使用 <h1> - .. 标题的标签,而不是不同样式的段落。
  • 熟悉CSS Margins并摆脱多个 &nbsp; .

正如您在其他问题中提到的,您可能希望为您的元素(例如 .menu)提供固定的(最小)宽度,以防止元素变得太窄:

.menu {
min-width: 300px;
}

关于html - 调整浏览器大小时如何防止 div 元素移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11442914/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com