動的等幅の子

Question

親をブロックレベルの要素にすることなく、親のすべての子を同じ幅にする方法はありますか？

基本的には、jsfiddleのすべての「列」が同じ幅になるようにしたいが、コンテナの幅がコンテナの幅全体に広がることは望ましくない。

編集：幅がより明白にするためにフィドルやコードを更新しました

ありがとう：私は子供

EDIT2の動的な数を処理するための方法を探しています！まあ

HTML

<div class="container"> 
    <div> 
    Short 
    </div> 
    <div> 
    SomethingSuperLong 
    </div> 
    <div> 
    Ok 
    </div> 
</div> 

https://jsfiddle.net/0g9af1dh/2

Answer 1

あなただけの彼らはあなたがこのようにそれを行うことができ、同じサイズになりたい場合。

.container > div { 
width: 33.3%; 
} 

あなたが望むものでない場合は、コメントで教えてください。私はそれを更新します。

Answer 2

すぐ下のスニペットをチェック

.container { 
    display: flex; 
} 

.container > div { 
    flex:1; 
    border: 1px solid red; 
} 

Answer 3

にあなたのCSSを変更します。

var maxWidth = 0; 
 
$('.container > div').each(function() { 
 
    var thisWidth = $(this).outerWidth(); 
 
    if(maxWidth < thisWidth) { 
 
    maxWidth = thisWidth; 
 
    } 
 
}); 
 
$('.container > div').width(maxWidth);

.container { 
 
    display: inline-flex; 
 
} 
 

 
.container > div { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div> 
 
    Short 
 
    </div> 
 
    <div> 
 
    Something super long 
 
    </div> 
 
    <div> 
 
    Ok 
 
    </div> 
 
</div>

編集：あなたにも、スクリプトのために開いている場合おそれ。そうでなければ無視する。

Answer 4

したがって、フレックスの機能はインラインで動作していますか？うーん...

.container { 
 
    display: inline-flex; 
 
} 
 

 
.container > div { 
 
    flex: 1 0 0; 
 
    border: 1px solid red; 
 
}

<div class="container"> 
 
    <div> 
 
    Short 
 
    </div> 
 
    <div> 
 
    Something super long 
 
    </div> 
 
    <div> 
 
    Ok 
 
    </div> 
 
</div>

Answer 5

my solutionはthis solution

に非常によく似ている。しかし、彼の溶液中で、彼はdisplay: block

た場合の外側のdivシェア品質を作るdisplay: tableとしてそれらを残しましたdisplay: inline-tableを使用するように変更すると、インライン文字が使用されます。それがインラインであることを示すために、外側のdivの隣にtest inlineを配置しました。

この解決方法では、外側のコンテナの幅を設定する必要があります。あなたの質問の詳細に基づいて、私はこれがあなたのために働くと思うが、それが私に知らされていない場合、私は答えを微調整することができます。