html - 使元素等于最宽的列和中心

我有两个并排的牢房。
单元格由内部容器绑定，而该容器由外部容器绑定。
这个想法是让两个单元格的宽度相等，即使它们的内容不是。
每个单元格的宽度必须是最宽元素的宽度。
然后内部容器将居中（宽度应为最宽单元格的两倍）。
目前我有两个结果：
它们的宽度相同，但延伸到可用页面宽度的一半。
内部容器收缩到中心，但单元不均匀
宽度。
如果没有javascript，是否有可能实现我想要的目标？

body {
  background-color: lime;
}
.container {
  margin: 20px;
}

.fb {
    display: flex;
    justify-content: center;
}
.fb-container {
    display: flex;
    align-items: center;
    flex: 1;
    /* flex: 0; */

    background-color: #fff;
    border: solid 0.1rem rgba(0,0,0,.12);
}
.fb-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;

    color: rgba(0,0,0, .87);
    font-size: 14px;    height: 46px;
    padding: 0 16px;
}

.fb-item:not(:first-child) {
    border-left: solid 1px rgba(0,0,0,.12);
}

<div class="container">
    <div class="fb">
        <div class="fb-container">
            <div class="fb-item">
                <span class="fb_label">Much longer</span>
            </div>
            <div class="fb-item">
                <span class="fb_label">Short</span>
            </div>
        </div>
    </div>
</div>

最佳答案

这更适合css网格。你可以把曲轴箱放在中间。

body {
  background-color: lime;
}

.container {
  margin: 20px;
}

.fb {
  display: flex;
  justify-content: center;
}

.fb-container {
  display: grid; /* Added this */
  align-items: center;
  grid-template-columns: 1fr 1fr; /* Added this */
  /* to replace the middle border*/
  grid-gap:1px;
  background:#e6e6e6 padding-box;
  /* */
  border: solid 0.1rem #e6e6e6;
}

.fb-item {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, .87);
  font-size: 14px;
  height: 46px;
  padding: 0 16px;
  background-color: #fff;
}

<div class="container">
  <div class="fb">
    <div class="fb-container">
      <div class="fb-item">
        <span class="fb_label">Much loooooonger</span>
      </div>
      <div class="fb-item">
        <span class="fb_label">Short</span>
      </div>
    </div>
  </div>
</div>

或者我不推荐的flexbox的老套想法：

body {
  background-color: lime;
}

.container {
  margin: 20px;
}

.fb {
  display: flex;
  justify-content: center;
}

.fb-container {
  display: flex;
  flex-direction:column; /* This will make them both equal */
  transform:translateX(-50%); /* Hack */
}

.fb-item {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, .87);
  font-size: 14px;
  height: 46px;
  padding: 0 16px;
  background:#fff;
  border: solid 0.1rem rgba(0,0,0,.12);
}
.fb-item:not(:first-child) {
  border-left: none;
  transform:translateY(-100%) translateX(100%);  /* Hack */
}

<div class="container">
  <div class="fb">
    <div class="fb-container">
      <div class="fb-item">
        <span class="fb_label">Much loooooooonger</span>
      </div>
      <div class="fb-item">
        <span class="fb_label">Short</span>
      </div>
    </div>
  </div>
</div>

关于html - 使元素等于最宽的列和中心，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56817675/