0

私は午前中ずっとこの問題の解決策を探して試してみましたが成功しなかったので、3つの子DIVに親に基づいて不特定の高さを等しく持たせることができない理由を理解するために自分の投稿を作成すると思いました。

3 つの列、親の 100% の高さ、各子 div の周囲の境界線、およびそれぞれの間のマージンが必要です。

これまでのコードの場所は次のとおりです。

HTML

<div class="outer">
    <div class="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida dictum odio accumsan aliquam.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida dictum odio accumsan aliquam. Curabitur tortor tortor, sodales vitae adipiscing vitae, tristique in sapien. Aenean interdum hendrerit quam, at semper risus pharetra ut. Morbi metus ipsum, sagittis ac rutrum faucibus, suscipit ut mauris. Nam eu felis felis. Nam et mi sit amet nisl euismod pharetra vitae id orci.</div>
    <div class="col3">Etiam ornare nibh non odio porta congue.</div>
</div>

CSS

.outer {
position:relative; 
height:auto; 
width:900px; 
}

.col1{
float: left;
    position:relative; 
min-height:100%; 
width:200px; 
margin-right: 10px;
border: 1px solid black;
}

.col2{
float: left;
    position:relative; 
min-height:100%; 
width:200px; 
margin-right: 10px;
border: 1px solid black;
}

.col3{
float: left;
    position:relative; 
min-height:100%; 
width:200px; 
border: 1px solid black;
}
4

3 に答える 3

2

外側の div の高さフォーム auto を次のように変更すると、機能し400pxます。

ここにあなたのためのフィドルがあります..

http://jsfiddle.net/vbEXB/3/

ここで関連する議論..

div の高さを親の 100% に設定

編集

および

以下の質問への回答は、固定高さを含まない純粋なcssソリューションを提供します(したがって、99%のケースをカバーします:))

親の高さを指定せずに、子の Div を強制的に親の Div の 100% にする方法は?

于 2012-07-03T14:20:14.660 に答える
1

jQuery/JavaScriptなしでこれを行う方法を理解することはできませんでした。私が信じていることから、これは厳密なCSSとHTMLでは不可能です。jQueryを使用する必要があるかもしれません。提供されているリンクを確認してください。これはあなたを正しい方向に向けるはずです。

http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html

お役に立てれば!

于 2012-07-03T14:18:00.270 に答える
0

親の指定された高さがなければ、これは非常に難しい仕事です。使用できる境界線とマージンを含めるために

box-sizing:border-box;

ユースケースに応じて、div の display-property として table-layout を試してください。親の高さがわかっている場合は、高さを設定します。または、絶対配置のレイアウトを試して、すべての辺を指定します (例:position:absolute;left:0;top:0;bottom:0;right:33%;左の列)。これには JavaScript 自体は必要ありませんが、何を達成したいかによって異なります。

等しい列レイアウトについてSOで多くの質問がありました。検索すれば必ず答えが出ると思います。

気が向いたら、ひどいIE サポートでフレックスボックスを使いたくなるかもしれませんが、ファズなしでまさにあなたが望むものを実現します。詳細については、次を参照してください。

于 2012-07-03T14:21:01.330 に答える