4

今日はjQueryでスライドショーを遊んでいました。変なことに気づいたらなんとか作成できました。スライドショーが配置されているdiv#featureは、その親要素に何らかの形で接着されているよう#contentです。divに追加margin: 10px autoすると、 divも親要素に対して 10px 低くなります。#feature#content

ここで私が間違ったことを誰か教えてもらえますか?

コード全体を提供すると混乱が生じますが、リンクは次のとおりです。

https://dharman.eu/sites/daftpunk/

の CSS #feature:

#feature {
    width:940px;
    margin: 10px auto;
    position: relative;
    height:500px;
    overflow: hidden;
    clear: both;
    box-shadow: 0px 0px 5px 2px #000;
}

および CSS の場合#content:

#content{
    min-height:800px;
    background-color: #fff;
}

私の友人は興味深いことに気づきました。余白の問題はまだ解決されていませんが、コンテンツの空の 10px スペースに追加margin-bottom: 30pxすると、正しく埋められます。#menu

4

2 に答える 2

3

position: relativeまさにそれを行います...これが適用される要素を作成して、その位置を親コンテナーに対して「相対的」にします。

#featureは の子で#contentあるため、#featureの位置は の位置に対して相対的になり#contentます。その 10px の余白を #feature に追加すると、 から 10px 下に移動し#contentます。

于 2012-11-30T14:16:54.180 に答える
0

に追加overflow:auto;してみてください#content。それは役立つかもしれません。

オーバーフローを追加すると、マージンが崩れるのを防ぎます

CSS では、2 つ以上のボックス (兄弟である場合とそうでない場合があります) の隣接するマージンを結合して、1 つのマージンを形成できます。

https://www.w3.org/TR/CSS2/box.html#collapsing-marginsから

于 2012-11-30T14:16:28.383 に答える