如何對齊不同父母的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

我結束了使用jQuery來調整.wrapper2，並使用相同的代碼，因爲只有一個備用的CSS。

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

Answer 2

這樣的事情。

柔性容器擴展項目以填充可用空間，或縮小它們以防止溢出。 flex: 1;將兩個相等的部分

.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>