Html/Css中DIV标记的问题

我一直在尝试创建一个网站，但是

div

标记似乎没有按计划进行。对于横幅

div

、徽标

div

和主导航系统

div

，它们完全符合我的要求，但是当我尝试定位子导航栏和搜索栏时，它们的位置会很奇怪吗？我看不出我的代码有什么地方做错了，一切似乎都正常

基本上，对于subnav条，我希望它位于

徽标div

下方，然后对于

搜索div

，我希望它位于主导航系统下方。 下面的代码使事情变得更简单，提前感谢

我相信以下是我遇到问题的代码：

html

这个怎么样（下面的示例部分）

}

看看注释掉的css

编辑： 在最终版本中，我还添加了一个包含所有内容的包装器，并删除了空的

以删除子AV上方的白线

右边距和左边距：自动可缩短为边距：自动；

---

也不需要定位和左、上、下属性。浮动和定位：绝对不一起工作。

当您浮动

div

中的所有元素时，该

div

的高度将塌陷为零，随后的元素将由浮动的子元素支配

解决此问题的最快方法是，将

溢出：auto

添加到容器中：

---

一个更全面的解决方案是在每个容器

div

s中添加一个，但是

overflow:auto

对于现代浏览器来说应该足够了。

您在小提琴上的标记在

#eReaderOver:hover

什么是：

#eReaderOver:hover
{ 
background: url("Images/SubNavBarOver_04.gif");

#SearchBar {
position: relative
margin-right: auto;
margin-left: auto;
height: 30px;
width: 900px;
top: auto;
left: auto;
right: auto;
 }

应该是：

#eReaderOver:hover
{ 
background: url("Images/SubNavBarOver_04.gif");
}

#SearchBar {
 position: relative;
margin-right: auto;
margin-left: auto;
height: 30px;
width: 900px;
top: auto;
left: auto;
right: auto;
 }

你在那把小提琴的位置线后面也漏掉了一个分号：

那么什么是：

#SearchBar {
position: relative
margin-right: auto;
margin-left: auto;
height: 30px;
width: 900px;
top: auto;
left: auto;
right: auto;
 }

应该是：

#eReaderOver:hover
{ 
background: url("Images/SubNavBarOver_04.gif");
}

#SearchBar {
 position: relative;
margin-right: auto;
margin-left: auto;
height: 30px;
width: 900px;
top: auto;
left: auto;
right: auto;
 }

---

因为你用标签做背景！这会导致将另一个俯冲到底部。我想你所需要的就是这样：

<div id="Banner">
 <div id="Logo"></div>
   <div id="NavBar">  
     <a id="ReviewsOver" href="#" class="Right" ></a>
     <a id="ContactOver" href="#" class="Right" ></a>
     <a id="ShopOver" href="Shop.php" class="Right" ></a>
     <a id="HomeOver" href="Index.php" class="Right" ></a>
   </div>
</div>

<div id="SearchBar">
  <form action="./Results.php" method="get" class="Right"> 
    <input type="text" name="input" size="50" style="border:3px solid #000" />
    <input type="submit" value="Search" />
  </form> 
</div>

<div id="SubNavBar">
  <a id="LaptopsOver" href="#" class="left"> </a>
  <a id="NetbooksOver" href="#" class="left"></a>
  <a id="TabletsOver" href="#" class="left"></a>
  <a id="eRaaderOver" href="#" class="left"></a>
</div>

#Banner {
border: 5px solid #000;
margin-right: auto;
margin-left: auto;
height: 100px;
width: 900px;
left: auto;
right: auto;
    background: url('images/Banner.gif') top right no-repeat;
}
#Logo {
border: 2px solid #000;
height: 150px;
width: 150px;
left: auto;
top: auto;
right: auto;
    background: url('images/logo.gif') top right no-repeat;
    float: left; /* if you want to put logo in left of banner, else write right */
}
#SearchBar {
position: relative
margin-right: auto;
margin-left: auto;
height: 30px;
width: 900px;
top: auto;
left: auto;
right: auto;
    float: right;
}
#SubNavBar {
    border: 3px solid #000;
margin-right: auto;
margin-left: auto;
height: 209px;
width: 100px;
left: auto;
right: auto;
    float: left;
}

---

你可以通过css中的“float”atribute在页面中浮动你的对象，试试吧

请将您的相关代码与您的小提琴一起张贴在这里。此外，请尽量遵循网站指南，不要规避它们。除非你的问题中有代码，否则你不能发布JSFIDLE链接是有原因的……都在JSFIDLE上，只是子AVBAR div+搜索栏div没有意识到这一点，我不认为它有问题，我认为这会更容易，对不起，先生。是的，只要删除空格就行了

“基本上对于subnav条，我希望它位于徽标div下方”。

目前，您有意（？）将subnav条居中，因此显然它不会位于左侧的徽标下方。您设置了“left:auto”和“right:auto”，基本上将元素居中。您有线框（图像）吗你希望你的网站看起来怎么样？谢谢，你的评论帮了大忙，搜索栏现在处于我想要的位置，但我的subnavbar仍然有问题，有什么建议吗？谢谢：）是的，除了我想要它，所以当你放大/缩小网站时，搜索栏和subnav保持在原位谢谢一打，解决了我的issue！！真的很感谢你的帮助，再次感谢！很高兴我能提供帮助，我澄清了我的答案，以便更好地指出更改的部分。是的，谢谢你，我现在对保证金等有了更好的了解，这很有用，包装的想法是解决我问题的主要方法，谢谢：）嘿，谢谢你指出这一点，我的searchbar现在可以工作了，这一定是一个很大的错误，但是我仍然无法修复subnavbar的位置，有什么建议吗？谢谢againI尝试了一下，由于徽标覆盖了我的横幅等，所以不能正常工作，而导航条现在已经到了一个奇怪的位置，谢谢你的帮助，谢谢！：）不是真的但是我要找的东西类型，我不喜欢网站上的滚动框，谢谢你的回复：）

#Banner {
border: 5px solid #000;
margin-right: auto;
margin-left: auto;
height: 100px;
width: 900px;
left: auto;
right: auto;
    background: url('images/Banner.gif') top right no-repeat;
}
#Logo {
border: 2px solid #000;
height: 150px;
width: 150px;
left: auto;
top: auto;
right: auto;
    background: url('images/logo.gif') top right no-repeat;
    float: left; /* if you want to put logo in left of banner, else write right */
}
#SearchBar {
position: relative
margin-right: auto;
margin-left: auto;
height: 30px;
width: 900px;
top: auto;
left: auto;
right: auto;
    float: right;
}
#SubNavBar {
    border: 3px solid #000;
margin-right: auto;
margin-left: auto;
height: 209px;
width: 100px;
left: auto;
right: auto;
    float: left;
}