1

これが CSS で実行できるかどうかはわかりませんが、JavaScript の方法に進む前に、絶対位置の div のセットを (全体として) 中央に配置できるかどうかを知りたいです。

<div id="container">
  <div id="item1" style="position:absolute;left:100px;top=50px>...some content...</div>
  <div id="item2" style="position:absolute;left:0px;top=0px>...some content...</div>
  <div id="item3" style="position:absolute;left:150px;top=100px>...some content...</div>
  <div id="item4" style="position:absolute;left:75px;top=75px>...some content...</div>
</div>

これらのアイテムの境界ボックスをページの中央に配置したいと思います。

もちろん、それらは「position:absolute」でスタイルされているため、フローから外れているため、コンテナの div のサイズは 0 px です...そして通常のトリックは機能しませんでした。

最後に、上記のスニペットは単なる説明であり、実際にはアイテムは任意に配置され(一部は動的に)、サイズとコンテンツは不明です(また、動的である可能性もあります)。このすべての動的性のために、大量のイベントをフックするよりも、すべてを CSS で処理できるようにしたいと考えています。

4

2 に答える 2

0

#container に固定幅を与えて position:relative; を与えてみてはどうでしょうか。これをチェックしてくださいhttp://jsfiddle.net/65vk2/

于 2012-08-08T08:07:12.053 に答える
0

ねえ、あなたはこのように簡単にhtmlとcssを変更することができます

HTML

<div id="container">
  <div id="item1">...some content...</div>
  <div id="item2">...some content...</div>
  <div id="item3">...some content...</div>
  <div id="item4">...some content...</div>
</div>

CSS

#container{
background:red;

  overflow:hidden;
}
#item1, #item2, #item3, #item4{
background:pink;
  margin:10px;
  margin-left:100px;
}

ライブデモ

于 2012-08-08T08:04:29.603 に答える