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 をこれらの新しいものに置き換えます。右と左の 2 つの要素をフローティングすると、それらが折り返されるので、インライン ブロックを使用します。

その 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;
}
于 2013-11-08T16:49:10.610 に答える