5

近くの要素の位置に影響を与えない高さの遷移を持つことは可能ですか？

この特定のケースには、float：leftを使用したdivが含まれます。

デモ： http ：//ashleystewart.me/

ホバートランジションを、動き回る要素の上に配置してください。

4

6 に答える 6

2

コンテナボックスに相対位置を指定し、フライアウト詳細ボックスに絶対位置を指定します。絶対位置の要素がレイアウトから削除されるため、フロートに干渉しません。

デモ：http ：//dabblet.com/gist/3729269

于 2012-09-15T18:51:56.333 に答える
1

あなたがフォローしている現在のレイアウトロジックでは、修正するのは非常に難しいでしょう。

なんで？最初の行のあなたfloatsのように隣り合って配置されているため、上の行のボックスが展開されると、下の行:hoverのfloatsもそのボックスに対して相対的に再配置されます。

これが私があなたのアイデアを達成するためにどのように取り組むかです：

  • floatingは使用せず、のようなものを使用してくださいdisplay: inline-block;。
  • セマンティックarticleラッパーは、を使用するときに問題を引き起こしていますinline-block;。それらを取り除くか（おっと、SEOフレンドリーではないかもしれません）、またはoverflow: hidden; 「ボックス」をスタイリングするときに依存していないことを確認してください。

申し訳ありませんが、これ以上のお手伝いはできませんでした。

于 2012-09-15T15:04:46.460 に答える
0

プロパティを使用positionする代わりにプロパティを使用floatできます。次のように実行できます。

#idname {
   position:fixed;
   margin-right:100px;
   margin-left:100px;
   margin-top:100px;
   margin-bottom:100px; /* I had written 100px only for example you can adjust it according to your screen */
}

#idname:hover {
   -moz-transtion: /* adjust the setting here for Firefox */;
   -webkit-transition: /* adjust the setting here for chrome and safari */;
   -o-transition: /* adjust the setting here for Opera */;
}

これにより、の移動が可能にdivなり、その位置が固定されます。

于 2012-09-19T07:36:37.853 に答える
0

を使用して、変換でトランジションを使用できます。変換は、レイアウトに影響を与えることなく要素を変更します。何かの高さを2倍にしたいと言って使用したいと思うでしょうtransform: scaleY()：

transform: scaleY(2);
-webkit-transform: scaleY(2);
-moz-transform: scaleY(2);
-o-transform: scaleY(2);
于 2012-10-04T07:49:04.397 に答える
0

<div>を適切な位置に置きます。外側のものを所定の位置に保ちます：固定し、内側のものを所定の位置に保ちます：絶対

または、もう1つの方法は、外側の最大高さを固定し、<div>内側を外側<div>の最大変換高さと同じに保つ必要があることです。<div>他の人がトランザクションに影響を与えないようにするのに役立ちます

または、フロート方式ではなく、ブロックを使用してコンテンツを表示する方法もあります。

于 2016-04-19T12:44:15.963 に答える
-1

position: absoluteの代わりに使用できますposition: fixed。これにより、Web開発ツールを開いたときにdivが移動しなくなります。

于 2016-04-19T12:32:27.233 に答える