css - DIV 样式问题

Question

嗨，我目前正在从事一个有很多 DIV 和部分等的项目。我目前的标题有问题。当我试图最小化浏览器窗口时，搜索栏和窗格 div 正在下降或从“标题”部分消失。

结构是这样的。

如上图所示，红色部分是标题，里面有 3 个 div。这是它的视图：

<div id = "header" class = "fixed-top">
   <div class = "wrapper">
      <div id = "logo">
      </div>
      <div id = "search-box">
      </div>
      <div id = "panes">
      </div>
   </div>
</div>

标题的宽度是 100% 并且有一类位置固定。包装类的宽度为 980 像素，边距为 0 自动/自动中心。我也将其定位为绝对。

徽标样式如下所示：

#logo {
    width: 130px;
    height: 45px;
    float: left;
    background:url(image.png);
    position: relative;
    margin: 4px 0 0 2px;
}

另一方面，搜索栏如下所示：

#search-box {
    width: 440px;
    padding: 2px 8px;
    float: left;
    position: relative;
    margin-left: 90px;
}

最后，窗格样式是：

#panes {
    float: right;
    width: 170px;
    height: 48px;
    position: relative;
    margin-right: 10px;
}

顺便说一句，搜索框 div 也有子 div。并且窗格 div 有一个 UL 列表，每个 LI 都向左浮动。

有什么我错过了为什么会发生这种情况吗？我也尝试了“clearfix”，但它仍在发生。

谢谢。

Answer 1

Like this

DEMO

CSS

   * {
    margin: 0;
    padding: 0;
}
#header {
    background-color: #ED1C24;
    display: table;
    vertical-align: middle;
}
#logo {
    width: 130px;
    height: 45px;
    background: url(image.png);
    position: relative;
    margin: 4px 0 0 2px;
    display: table-cell;
}
#search-box {
    width: 440px;
    padding: 2px 8px;
    position: relative;
    margin-left: 90px;
    display: table-cell;
}
#panes {
    width: 170px;
    height: 48px;
    position: relative;
    margin-right: 10px;
    display: table-cell;
}

Answer 2

试试这个 CSS 代码，它会很好用

 *{
    margin:0;
    padding:0;
}
#header{
    background-color:#ED1C24;
    width:740px;
    float:left; 
    }
#logo {
    width: 124px;
    height: 45px;
    background:url(image.png);
    position: relative;
    margin: 4px 0 0 2px;
    float:left
}
#search-box {
    width: 420px;
   margin-left:20px;
    position: relative;
      float:left
}
#panes {

    width: 160px;
    height: 48px;
    position: relative;
    margin-right: 10px;
       float:left
}