16

cssのみを使用してposition:absolute、動的な高さを持つ要素を垂直方向のスペースに配置するにはどうすればよいですか? コンテナーとディスプレイで使用できるトリックはありますか?

4

3 に答える 3

10

残念ながら、絶対配置を使用すると、定義上、要素がスペースを占有しなくなります。いいえ、css を介してのみこれを行う方法はありません。

もちろん、これを実現するために jQuery (またはプレーンな JavaScript) を使用できます。私がそれを行う方法は、space各垂直要素の隣に要素を配置することです。スペース要素と絶対位置の垂直要素の両方を相対位置の div で囲みます。ページの読み込み時に、スペース要素の高さを垂直要素の高さに合わせて変更します。

于 2012-08-06T23:56:54.037 に答える
4

position: absoluteフロー内のスペースを占有しないことを意味します。ただし、margin を使用してアニメーション化する必要はありません。float要素に任意のスペースを占有させ、各要素を作成するために 使用できますposition:relative。

div.animate-me {
   width: 300px;
   margin: 20px;
   float: left;
   left: -1000px; // Make them start offscreen
   position: relative;
   border: 1px solid red;
   visibility: hidden
}​

$('div').css().animate({
    left: 0
});

サンプル http://jsfiddle.net/qxzzX/1/

于 2012-08-07T14:34:43.670 に答える