Html 在div中定位元素

我有一个简单的网站，我从零开始制作。我对标题的布局感到困惑：

• H1标题
• 文本行
• 标志
• 菜单（来自w3school的编码）

这四个在我的div头中。我希望能够将它们定位在div中任何我想要的位置。问题是我不确定使用什么编码（边距、位置：相对或绝对、填充、顶部：、右侧：，等等）

我尝试过各种组合，但它们似乎从未定位在我想要的位置，它们弄乱了彼此的位置：菜单失去了全宽，标题div顶部和右侧之间的相同空间无法很好地显示徽标，H1和标记似乎对我设置的像素没有响应，等等

有人可以花点时间看看我的代码，并提出一个建议，如何使这个布局稳定

身体{
背景色：#F8；
}
#页面{
宽度：900px；
保证金：30像素自动；
背景色：#FFFFFF；
}
#标题{
高度：377px；
宽度：100%；
背景图片：url（images/banner.jpg）；
背景重复：无重复；
背景位置：0px 0px；
}
#标题a{
颜色：黑色；
文字装饰：无；
}
#标题ul{
列表样式类型：无；
边际上限：0；
填充：0；
溢出：隐藏；
背景色：#3399FF；
位置：相对位置；
top:264px；
}
#头李{
浮动：左；
}
#标题李a{
显示：内联块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
#头李a{
背景颜色：灰色；
}
#标题LIA:悬停：未（.active）{
背景色：#3366CC；
}
.p1{
字体系列：Consoleas、摩纳哥、monospace；
字体大小：20px；
位置：相对位置；
顶部：28px；
左：50px；
}		
.p2{
字体系列：Consoleas、摩纳哥、monospace；
字体大小：16px；
位置：相对位置；
顶部：5px；
左：200px；
}
.标志{
浮动：对；
位置：相对位置；
顶部：8px；
右：8px；
}
#内容{
位置：相对位置；
顶部：12px；
左：10px；
}
#页脚{
字体大小：14px；
填充顶部：12px；
垫底：12px；
文本对齐：居中；
边框顶部：#D3 0.5px实心；
}
“这将是我在H1下的标签”








H1页面内容的标题


























页脚

第一个建议：尝试将网页视为对象列表，而不是海报等。屏幕大小各不相同（桌面/手机），您应该使用相对宽度和位置来确保网站的响应能力。我相信你可以找到一个更好的模板

第二个建议：如果您确实希望在“任何地方”定位元素，这是一个正确使用定位的示例：

<style>
.floatingdiv {
position:absolute;
right:0;
top:0;
}
</style>
<div class="floatingdiv">
<h1>Header</h1>
</div>

.浮动div{
位置：绝对位置；
右：0；
排名：0；
}
标题

将标题的内容放在无序列表中。如果您使用的是像Bootstrap这样的响应性框架，这将是完全不同的-但是由于您没有指定，下面是一个没有框架的示例

HTML

<div id="header>
<ul>
  <li><h1>Your Title</h1></li>
  <li><p>some line of text you wanted</p></li>
  <li class="logo"><a href="index.html"><img src="yourlogo.png" /></a></li>
  <li class="spacer"></li>
  <li><a href="somepage.html>Some Page</a></li>
  <li><a href="somepage.html>Some Page</a></li>
  <li><a href="somepage.html>Some Page</a></li>
</ul>
</div>

---

这只是一个正确构造div的例子，正如Holle指出的，这是一个对象列表，而不是海报。我认为你在定位中的主要问题是你的HTML中的基础结构不利于操作。 我建议为每个部分创建一个容器div，然后在这些部分中创建更多div或其他内容。i、 e

<div id="headerContainer">
    <h1>Title</h1>
    <img id="logo" src="myImagePath">
</div>
<div id="navigation">
        <!-- Navigation Bar, your UL list items -->
</div>
<div id="pageContent">
        <!-- More content... <img>s, <p>s, <h1>s, probably more divs to structure the content etc-->
</div>

标题

我希望这对你有所帮助，如果你想得到一个建议，可以看看DevTips的youTube频道，他非常擅长解释网站的设计和构建阶段

此外，在定位方面，请查看flexbox froggy（谷歌it），在您加入之前，请注意浏览器支持并不出色

干杯，

---

詹姆斯

谢谢你的推荐。你推荐一些自学课本吗？没问题，一个和我一起工作的人用过这个-我看过了，它非常简单，解释得很好。没问题，一个和我一起工作的人用过这个-而且，它真的避免了很多行话，它很简单，解释得很好，也是一个很好的参考指南。就我个人而言，当我第一次开始学习时，我发现一些资源非常有用，记下基础知识并确保你真正理解（不是如何编写代码，理解代码如何工作）是非常重要的，认真地写，然后在论坛上征求反馈意见，了解你如何做得更好，人们的批评胜过一本书，因为这不是一个模板。我自己做的（因此产生了问题）。这段代码对我来说是最熟悉的，我会试试看。但我使用了position样式，它似乎会影响div标题中其他内容的位置。

<div id="headerContainer">
    <h1>Title</h1>
    <img id="logo" src="myImagePath">
</div>
<div id="navigation">
        <!-- Navigation Bar, your UL list items -->
</div>
<div id="pageContent">
        <!-- More content... <img>s, <p>s, <h1>s, probably more divs to structure the content etc-->
</div>