2011-07-23 10 views
2
<body> 
<div id="parent"> 
    <div id="childRightCol"></div> 
    <div id="childLeftCol"></div> 
</div> 
</body> 

親の高さは動的であると想定され、子によって定義された最大高さに伸びます。 ChildRightは高さを動的に変更しますが、親の高さを100%にします。 ChildLeftは、親の高さを何度か定義します。親の高さを定義する子div

問題は、ChildLeftが親の高さを定義するためです。高さ:親の高さが定義されていないため、子どもの100%は機能しません。助けてください。

id="news-flicker-container" 
id="news-flicker-userbars" 

答えて

1

代わりの可視性を切り替えることがdisplay: nonedisplay: blockを使用して要素のサイズを保持するvisibility: hiddenvisibility: visibleを使用します。

記事のフォームの積み重ねを防ぐために、補正する必要があります。これは、すべての記事を互いに左に浮かべて、最初のもの以外のすべての記事にマイナスのマージンを与えて、すべて同じ記事を残すことで実現できます。

this demo fiddleを参照してください。これは、2つの状況、すなわち、右側の列と右側の列の高さが低く、右側の列の高さが低い記事を示しています。どちらの場合も、左の列の高さ(最大の記事の高さ)が親divの高さを決定します。

CSSの基本的な要件:

#news-flicker-container { 
    float: left; 
} 
#news-flicker-userbars { 
    float: left; 
} 
#news-flicker-container article { 
    width: 100%; 
    visibility: hidden; 
    float: left; 
    margin-left: -100%; 
} 
#news-flicker-container article:first-child { 
    margin-left: 0; 
} 
+0

最大の要素が最初の記事でない場合、これは機能しますか? –

+0

それは最も大きいすべての記事のために働く、最初の記事が最も大きいところの[fiddle](http://jsfiddle.net/8aGr9/2/)を見なさい。最初の記事の特別なスタイルは、最初の記事がすでに適切な場所にあるためです。それにも負のマージンを与えると、それが列から外れることになります。 – NGLN

+0

@ハリソンこれがうまくいかない場合:このCSSをあなた自身のものにコピーするだけでは、まだそのトリックは全然できません。それはどのように動作するかの単なるサンプルです。例えば。私はちょうどあなたの記事が左の列の別のdivの子であることを知っていたので、あなたの特定の状況に合わせて私の例を書き直さなければなりません。私/私にとっては、CSSや実際の構造を自分で提供していないので、やや難しいです。完全な回答が必要な場合は、CSSと実際のマークアップを入力してください。 – NGLN

1

Equal Height Columns with Cross-Browser CSS

あなたはIE 6と7をサポートする必要がない場合、これはより良いアプローチのようになります。

Use CSS display:table for Layout

+0

表示テーブルは、私が後で他のものをしようとしますが、簡単なCSSのソリューションはいいだろう、何らかの理由で私のために動作しません。 –

+0

OPは左の列の子を 'display:none'で隠し、隠れた子の1つが高さを設定する必要があるため、これは機能しません。 – NGLN

関連する問題