Question

当窗口调整大小时，我已经在标题包装到下一行的时候遇到了这个div。您可以在http://www.commexfx.com查看。在调整窗口大小时，包含搜索框等标题中的右侧div将被包装到下一行。我尝试了一切：改变位置，显示，白色空间等，但没有。结构是这样的：

    <div id="header">
      <div id="logo"> </div>
      <div class="top-widget"></div>
    </div>

暂时的CSS代码是：

#header {
  margin: 0 auto;
  /* max-width: 960px; */
  width: 960px !important;
  height: 100px !important;
  border: 1px solid blue;
  background-color: #ffffff;
  white-space: nowrap !important; 
}


#logo {
  float: left;
  z-index: 9999999;
  margin-bottom: 20px;
  width: 360px;
  display: inline;
  border:1px solid green;
  padding: 0 !important;
  margin: 0 !important;
}


.top-widget {
  background: none;
  border: none;
  /*clear: right;*/
  float: right;
  height: 95px;
  text-align: right;
  display: inline;
  width: 590px !important;
  border: 1px solid yellow;
  padding: 0 !important;
  margin: 0 !important;
}

非常感谢任何帮助。还搜索了这里的论坛，并尝试了我能找到的所有可能的解决方案，但没有。

由于

Answer 1

将min-width:960px添加到您的css #header声明中。

Answer 2

用这些新的css替换你的css。浮动两个元素，一个右边和一个左边会使它们换行，所以我会使用内联块。

除非你将div中的元素定位为绝对值，否则你不需要position：relative，所以你也可以删除它们。与z-index相同。

此外，除非您有其他样式覆盖此内容，否则您不需要！important。我试着谨慎地使用它。

#header {
margin:0 auto;
width:960px;
}

#logo {
margin-bottom: 20px;
width: 360px;
display: inline-block;
}

#logo img {
vertical-align: inherit;
}

.top-widget {
text-align: right;
width: 570px;
display: inline-block;
}

如何阻止浮动div从包装到下一行 - 尝试了一切

2 个答案: