如何对齐不同父母的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>