2

つまり、基本的に私は mainDiv を持っています。これはボディのかなりのサイズです。mainDiv には、隣り合うはずの 2 つの div があり、サイズ変更またはモバイル デバイスが入るまで存在します。問題は、2 番目の div が最初の div と完全に重なることです。

望ましい結果 http://img17.imageshack.us/img17/473/yn9x.jpg

#mainDiv { 
    border: 1px solid black;
    height: 670px;
}

#mainDiv div {
    position:relative;
    border: 1px solid red;
    float: left;
}

残りのコード: http://jsfiddle.net/fDELs/2/

  • width: [value]% は使用できませんでした。これは、拡大中に両方の div を常に表示する必要がないためです (さらに、最初の div を水平方向に食べ始めます)。
  • float: left または float:right は使用できません。ページが広くなると、2 つの div の間に空の領域が表示されるためです。

現在、最初のdivの幅と位置をチェックし、2番目のdivの「左」プロパティを設定するjsの回避策がありますが、CSSでやりたいと思っています。

4

5 に答える 5

5

position: relativediv からと のtop値を削除し、margin-top代わりに使用します。

#mainDiv {
    border: 1px solid black;
    height: 670px;
}

#mainDiv div {
    border: 1px solid red;
    float: left;
}

#first {
    margin-top: 170px;
}

#second {
    height: 400px;
    margin-top: 65px;
}

更新されたフィドル

于 2013-07-12T15:50:42.727 に答える
0

したがって、答えはここに投稿したものとはほとんど関係がなく、完全なフィドルを見ることによってのみ確認できます。

問題は、両方の内部 div が同じポイントから相対的に配置されていることです。コンテンツでいっぱいの div は少しだけ押し下げられ、コンテンツがほとんどない div はその真ん中に押し下げられます。

#first {
    top: 170px;
}

#second { 
    height: 400px;
    top: 65px;
}
于 2013-07-12T15:52:30.087 に答える