如何对齐不同父母的div？

Question

我想要一个菜单​​里面有内容，内容与其他菜单项对齐。

目前我有：

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

我希望它像这样对齐：

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

以下是我现在所拥有的代码，但我怎么能按照我想要的方式制作呢？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

JSFiddle

Answer 1

像这样。

flex容器扩展项目以填充可用空间，或缩小它们以防止溢出。 flex: 1;会将flex-box分成两个相等的部分

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

不要在主要弹性容器上使用justify-content: space-between，而是将弹性项目空间放置到容器的两端，而是在弹性项目上使用flex: 1，这会强制它们平等地共享容器空间。 / p>

＆＃13;

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

我最终使用jQuery来调整.wrapper2的大小，并使用与后备CSS相同的代码。

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

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

为什么不简单

public int[,] CalculateMultMatrix()
{
     int[,] multTable = new int[10, 10];
     for(int i = 1; 1 <= 10; i++)
     {
         for(int j = 1; j <= 10; j++)
         {
             multTable[i - 1, j - 1] = i * j;                    
         }
         return multTable;
     }
 }

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

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

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