Question

您好，我目前正在开发一个包含大量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％并且具有一个位置固定的类。包装类的宽度为980px，边距为0 auto / auto center。我也是绝对的。

徽标样式如下所示：

#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

喜欢这个

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

DIV造型问题

2 个答案: