li 要素の垂直列があるモバイル ファーストのレイアウトが必要だとしましょう。モバイル デバイスでいずれかの li 要素をクリックすると、「ドロワー」スタイルのすぐ下に新しい li が作成され、展開して、クリックした li 要素に関連するコンテンツが表示されます。
単に：
<ul>
<li>1</li>
<li>2</li>
<li class='data'>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
まったく同じレイアウトをデスクトップ モード (幅 1200px など) に吹き飛ばしたとします。ここで、レイアウトは引き続き li タグを積み重ねる必要がありますが、1 つをクリックすると、同じことが dom で発生する必要があります (クリックされたものの下の新しい li)。新しい li は、ul 列の右側のスペースを占有します。どちらをクリックしても、li の上部は ul 要素の上部と同じでなければなりません。
確かに、これは可能です、と彼らは言います。しかし！キャッチがあります：
右側のデータに絶対配置を使用したくありません。これは、ul よりも長い場合、その下のコンテンツがその後ろに移動するためです。
リストのさらに下にある li が右にフロートされると、フロートについて知っていたにもかかわらず、前のものよりも上に移動することはありません。
繰り返しますが、CSS のみのソリューションを探しています。私はすでにこれを絶対位置/高さで修正しましたが、高さを動的にしたいと思います。
これは、ほとんど機能しているがまだ壊れているレイアウトでチェックアウトするための jsfiddle セットアップです: http://jsfiddle.net/Mz5RM/6/
ここでは、テキストが期待どおりにコンテナーの下部をクリアしていることがわかります。これは、li 3 の動的な高さを尊重します。
しかし... 私はそれが一番上にあるように、li 1 でフラッシュしたい.
誰かがこれに対する解決策を持っていますか? これは、解決するのがとても楽しい興味深い問題です。
これは次のようにする必要がありますが、これは絶対配置/固定高さの修正を使用しているため、末尾のコンテンツを背後に移動できます。 http://jsfiddle.net/Mz5RM/5/
問題は、コンテンツが動的であることです。したがって、このソリューションは理想的とは言えません。私のno-jsソリューションはほぼ不可能であることがわかり始めています...
ありがとう！