0

调整窗口大小时，我一直在标题中使用此 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;
}

将不胜感激任何帮助。还在这里搜索了论坛并尝试了我能找到的所有可能的解决方案，但一无所获。

谢谢

4

2 回答 2

0

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

您不需要 position:relative 除非您将该 div 中的元素定位为绝对元素，以便您也可以删除这些元素。与 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;
}
于 2013-11-08T16:49:10.610 回答
0

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

于 2013-11-08T16:17:52.880 回答