HTML/CSS div不适用于div_Html_Css

HTML/CSS div不适用于div

html css

HTML/CSS div不适用于div,html,css,Html,Css,我有一个CSS和HTML的问题，我不能理解为什么会发生这种情况 HTML: <body> <div id="header"> <div id="header_conteiner"> <div id="logo_container"> <img src="images/logo.png" /> </div> <input type="text" id="t

我有一个CSS和HTML的问题，我不能理解为什么会发生这种情况

HTML:

<body>
  <div id="header">
    <div id="header_conteiner">
      <div id="logo_container">
        <img src="images/logo.png" /> 
      </div>
      <input type="text" id="txtSearch" class="text_input" />
    </div>
  </div>
</body>

body{
    background:#787777;
    font-family:"Droid Sans",Helvetica,Arial,Sans-Serif;
    font-size:0.81em;
    margin: 0px;
    padding: 0px;
}

#header{
    height:100px;
    background:#000000;
    width:100%;
    margin:0px;
    border:0px solid #6F3;
}

#header_conteiner{
    width:1000px;
    height:100px;
    border:1px solid #9F0;
    margin:0 auto;
}

#logo_container{
    padding-top:3px;
    width:237px;
    height:100px;
    border:1px solid #03F;
}

#txtSearch{
    width:220px;
    height:20px; float:right;
}

结果如下：

正如您在图像中看到的那样，输入文本超出了

标题\u上下文

有人能给我一些建议吗？

将输入移到徽标容器之前。

徽标\u容器是一个div，一个块元素。意味着它占据了容器中的水平空间；下一个HTML元素将强制位于其下方。由于logo_container设置为100px，与header_conteiner相同，因此输入框没有垂直空间。它被强制置于容器下方

要解决此问题，可以将logo_容器设为内联元素并将其向左浮动。内联元素可以彼此相邻，而块线元素需要自己的水平空间

CSS显示属性：

看起来logo_容器在3px顶部有一个填充物

将此添加到#header_contenner：

  float: left;
  clear: both;

结果是：

#header_conteiner{
  width:1000px;
  height:100px;
  border:1px solid #9F0;
  margin:0 auto;
  float: left;
  clear: both;
}

谢谢，它工作了，但是仍然不能理解为什么html是这样工作的，因为输入元素实际上放在logo容器下面，然后你告诉它向右浮动。如果您先输入，则它将向右浮动，而不会占用徽标容器的空间，而徽标容器可以保持向上。简单地说，如果您希望更多的块元素彼此相邻放置，则浮动元素必须先移动。在非浮动元素之后放置的任何浮动元素都将被放置在其下方。这是因为浮动元素与其他元素一样首先被设置，然后从其容器流中移除。如果随后设置，则div before将一直向右扩展，因此使用搜索框上方的像素。因此，当您随后浮动它时，只有div下面的像素可用于浮动元素自身的放置。