2

相対位置の要素の内側に柔軟な絶対位置の要素を作成しようとすると問題が発生します。コードは次のとおりです。

http://jsfiddle.net/cxHNN/

上記のコードは、.contentdiv内の.activedivの高さの値が最大の場合に正常に機能します。（inner-3この場合）

ただし、.activeクラスが他のinner要素（テキストが少ない）に設定されている場合、最大の要素（inner-3）のコンテンツがオーバーフローします（ここの例を参照）。

JavaScriptを使用してこれを解決することはできますが、この問題に対する純粋なcssソリューションが必要です。これにより、すべてのinner要素が固定の高さを与えずに同じ高さになり、コンテナーの幅が変化すると高さが動的に変化します（レスポンシブレイアウト）。

注： ピクセルベースのマージン/幅は気にしないでください。jsFiddleを機能させるには、cssを少し調整する必要がありました。それらはすべて、私の元のスタイルシートでは％またはemsです。

4

1 に答える 1

0

.innerすべてのdivを非表示にして、アクティブなdivのみを表示してみてください。

.inner .content {
    background: none repeat scroll 0 0 #CCCCCC;
    margin-top: -4em;
    padding: 0.5em;
    display: none;}
.inner.active .content{
    display: block;
    }

更新：内側のdivを同じサイズにする必要がある場合は、絶対に配置したり、フロートさせたり、非表示またはインラインで表示したりすることはできません。だから、私は次のことをしました：

  • フレックスコンテナは相対的な位置に配置され、その中の要素を左上に配置して正しく配置できるように十分なパディングが与えられています。また、フォントサイズを0に設定し、折り返しを防止しました。
  • 内側のdivは、幅0のインラインブロックで表示されます
  • アクティブな内側のブロックには100％の幅が与えられているため、表示されているのはそれだけです
  • H1は絶対に配置され、必要な場所に配置されます

http://jsfiddle.net/cxHNN/4/

パディングやスペーシングなどで遊ぶ必要があります。ああ、私はこれをFireFoxでのみテストしました-他のブラウザに問題があるかもしれません。

于 2012-12-18T06:48:23.303 に答える