3

マークアップは次のとおりです。

<div>
    <a href="google.com">my link</a>
    <span>Testing content.</span> 
</div>

そしてCSS：

div > * {
    float: left;
    margin-top: -50px;
}

div{

    margin-top:200px;
}

注: div は、すべてのコンテンツを元に戻して表示できるようにするためのものです。

margin-top に正の値を使用すると、たとえば50pxbotaとspanが 50 ピクセル押し下げられ、互いに重なりません。

たとえば、margin-top に負の値を使用すると-50px、両方とも 50px だけ引き出されますが、互いにオーバーラップします。

これはなぜ起こり、どうすれば防ぐことができますか?

編集、詳細情報：

  • 残念ながら、aorspanをラッパーに入れることはできません。
  • フローを再編成する必要があるため、フロートを保持する必要があります。
  • aと を上に押し上げる必要がありspanます。

そしてフィドル：http://jsfiddle.net/xsSVX/

4

1 に答える 1

2

追加する

div > * {
    float: left;
    margin-top: -50px;
    padding-bottom: 40px;
}

divに余分なボディを与えます..

http://jsfiddle.net/xsSVX/6/

于 2012-04-30T04:52:47.713 に答える