1

CSS プロパティに依存して、overflow:hidden3 つのネストされた & フロートされたdivs が含まれています。は、この htmloverflow:hiddenの親に適用されます。div

私が使用していないときは、フロートされたs の行内でoverflow:hidden最後がずれていますが、使用すると、構造全体が下に移動します。divdivoverflow:hiddendiv

上記のテキストの意味を誰かが理解してくれることを願っていますが、そうでない場合に備えて、CSS コードも提供します。

CSS:

#header {
  display: block;
  width: 590px;
  height: 50px;
  background: #336699;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;

  overflow: hidden;
}

.header-left-wrapper {
  float: left;
  width: 150px; height: 50px;
  background: #ff0000;
}
.header-input-wrapper {
  float: left;
  width: 300px; height: 50px;
  background: #00ff00;
}
.header-right-wrapper {
  float: right;
  width: 140px; height: 50px;
  background: #ff0000;
  overflow: hidden;
}

明確にするために、何らかの理由で に適用overflow:hiddenすると、または.header-right-wrapperを適用したかのようにヘッダー全体が下に移動します。何か助けはありますか？前もって感謝します。marginposition

4

1 に答える 1

0

.header-right-wrapper は、フローティング要素として、ページ上の何か他のものをクリアする必要があるため (.close) 削除されます。#header {overflow: hidden} を指定すると、少なくともその {height} に到達するポイントまで、その子を含むように強制されます。これには、フローティング div が含まれます。したがって、下に移動します。問題は #header に関連するマークアップではなく、Lightbox レイアウト全体です。ここに1つの修正があります：

.close {margin-bottom: -100px;}

http://jsfiddle.net/ZETus/4/

別のアプローチは、フロートがそれをクリアする必要がないように、絶対配置を使用してフローから .close を取り出すことです。

http://jsfiddle.net/ZETus/5/

.close {
    position: absolute;
    right: -10px;
    top: -10px;
}
于 2013-02-15T04:09:33.637 に答える