3

「ブロック」の「グリッド」を作成しようとしています。ホバーすると、その下の div にテキストが表示されます。例では、私はそれを好きなようにすべて持っていますが、私が持っている配置でそれを機能させる方法はありますか?

私が望むのは、上のものが「展開」されているときに、下のdivのみを押し下げることです(例の左下のもののように)。しかし、巨大なギャップが発生し、アニメーションも表示されないため、明らかに何かが正しくありません。

ただし、2 番目の列で一番下の div が反応する方法は、私が目指しているものではありません。

何か案は？

ありがとうございます！

http://jsfiddle.net/nbFkZ/

4

1 に答える 1

2

あなたのコメントを通して、私は最終的にあなたの質問を理解したと思います:

私がやったこと：

  1. 2 番目と 3 番目の li を新しい UL 要素に移動しました。
  2. そして、両方の UL 要素を左にフロートさせます。

HTML はここに投稿するには多すぎるので、CSS のみを投稿します。

ul.things {
    list-style: none;
    float: left;
    width: 240px;
}

ul.things li {
    display: inline-block;
    /*float:left;*/
    margin:15px;
}

HTML、CSS & ライブデモ: http://jsfiddle.net/nbFkZ/4/

それが役に立てば幸い ：）

于 2012-06-09T13:37:53.593 に答える