DIV 样式问题答案

【问题标题】：DIV styling problemsDIV 样式问题
【发布时间】：2013-08-29 15:33:20
【问题描述】：

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

结构类似于this。

如上图所示，红色部分是标题，里面有 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。而且 panes div 有一个 UL 列表，每个 LI 都向左浮动。

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

谢谢。

【问题讨论】：

D***，我只是找到了解决方案。忽略这个问题，谢谢。

标签： css html header position

【解决方案1】：

试试这个 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
}

【讨论】：

【解决方案2】：

像这样

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;
}

【讨论】：