異なる親のdivを整列する方法は？

Question

私は内容が内部にあり、内容は他のメニュー項目と一直線に並んでいます。

現在、私が持っている：

[- someth      something else] 
[- something   something else something] 
[- some     something else some] 

そして、私はそれがこのように整列させたい：ここでは

[- someth   something else   ] 
[- something   something else something] 
[- some    something else some  ] 

は、私が今持っているもののコードですが、どのように私はそれを道にすることが欲しいです？

.menu { 
 
    width: 100%; 
 
} 
 
.menu-item { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 
.wrapper2 { 
 
    display: flex; 
 
}

<div class="menu"> 
 

 
    <div class="menu-item"> 
 
    <div class="wrapper1">Someth</div> 
 
    <div class="wrapper2"> 
 
     <p>something else</p> 
 
     <p></p> 
 
    </div> 
 
    </div> 
 

 
    <div class="menu-item"> 
 
    <div class="wrapper1">Something</div> 
 
    <div class="wrapper2"> 
 
     <p>something else</p> 
 
     <p>something</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="menu-item"> 
 
    <div class="wrapper1">Some</div> 
 
    <div class="wrapper2"> 
 
     <p>something else</p> 
 
     <p>some</p> 
 
    </div> 
 
    </div> 
 

 
</div>

JSFiddle

Answer 1

私は.wrapper2のサイズを変更するjQueryを使用して唯一の代替CSSと同じコードを使用して終了しました。

var size = 0; 
$('.wrapper2').each(function() { 
    if($(this).width() > size) 
    { 
     size = $(this).width(); 
    } 
}); 
$('.price-wrapper2').width(size); 

Answer 2

このような何か。

フレックスコンテナは、空き領域を埋めるためにアイテムを展開します。また、オーバーフローを防ぐためにコンテナを縮小します。 flex: 1;は、2つの等しい部分

.menu { 
 
    width: 100%; 
 
} 
 
.menu-item { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 
.wrapper2 { 
 
    display: flex; 
 
    width: 50%; 
 
} 
 
.wrapper2 > p { 
 
    flex: 1; 
 
} 
 
.wrapper2 > p:last-child { 
 
    text-align: right; 
 
}

<div class="menu"> 
 

 
    <div class="menu-item"> 
 
    <div class="wrapper1">Someth</div> 
 
    <div class="wrapper2"> 
 
     <p>something else</p> 
 
     <p></p> 
 
    </div> 
 
    </div> 
 

 
    <div class="menu-item"> 
 
    <div class="wrapper1">Something</div> 
 
    <div class="wrapper2"> 
 
     <p>something else</p> 
 
     <p>something</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="menu-item"> 
 
    <div class="wrapper1">Some</div> 
 
    <div class="wrapper2"> 
 
     <p>something else</p> 
 
     <p>some</p> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 3

代わりのフレックスにflex: 1を使用する容器の両端にスペースあなたのフレックスアイテム、一次フレックス容器上justify-content: space-betweenを使用してフレックスボックスを分割しますアイテムは、コンテナスペースを均等に共有する必要があります。

.menu { 
 
    width: 100%; 
 
} 
 
.menu-item { 
 
    display: flex; 
 
    /* justify-content: space-between; */ 
 
    align-items: center; 
 
} 
 
.menu-item > * { 
 
    flex: 1;      /* new */ 
 
    border: 1px dashed black; 
 
} 
 
.wrapper2 { 
 
    display: flex; 
 
    justify-content: space-between; /* optional; just for demo */ 
 
}

<div class="menu"> 
 
    <div class="menu-item"> 
 
    <div class="wrapper1">Someth</div> 
 
    <div class="wrapper2"> 
 
     <p>something else</p> 
 
     <p></p> 
 
    </div> 
 
    </div> 
 
    <div class="menu-item"> 
 
    <div class="wrapper1">Something</div> 
 
    <div class="wrapper2"> 
 
     <p>something else</p> 
 
     <p>something</p> 
 
    </div> 
 
    </div> 
 
    <div class="menu-item"> 
 
    <div class="wrapper1">Some</div> 
 
    <div class="wrapper2"> 
 
     <p>something else</p> 
 
     <p>some</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

あなたは、CSSで右の比率を使用するためにここにリンクがあります：JSFiddle

.menu, 
.menu-item:first-of-type p{ 
    width: 100%; 
} 
.menu-item { 
    width:100%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
} 
.wrapper2 { 
    display: flex; 
} 
.wrapper1, 
.wrapper2, 
.menu-item:nth-of-type(2) p, 
.menu-item:nth-of-type(3) p { 
    width:50%; 
} 
.menu-item:nth-of-type(2) p:nth-of-type(2), 
.menu-item:nth-of-type(3) p:nth-of-type(2) { 
    text-align:right; 
} 

Answer 5

をなぜしないで、単に

.menu { 
 
    width: 100%; 
 
    display: flex; 
 
} 
 

 
.wrapper1, .wrapper2 { 
 
    width: 100%; 
 
    display: inline-block; 
 
} 
 

 
.menu-item:nth-child(2) { 
 
    text-align: right; 
 
    padding-right: 5px; 
 
}

<div class="menu"> 
 
    <div class="menu-item"> 
 
     <div class="wrapper1"> 
 
      Someth 
 
     </div> 
 
     <div class="wrapper2"> 
 
      <p> 
 
       something else 
 
      </p> 
 
      <p> 
 
      </p> 
 
     </div> 
 
    </div> 
 
    <div class="menu-item"> 
 
     <div class="wrapper1"> 
 
      something else 
 
     </div> 
 
     <div class="wrapper2"> 
 
      <p> 
 
       something else 
 
      </p> 
 
      <p> 
 
       something else 
 
      </p> 
 
     </div> 
 
    </div> 
 
    <div class="menu-item"> 
 
     <div class="wrapper1"> 
 
      Some 
 
     </div> 
 
     <div class="wrapper2"> 
 
      <p> 
 
       something else 
 
      </p> 
 
      <p> 
 
       some 
 
      </p> 
 
     </div> 
 
    </div> 
 
</div>