html - 你如何创建两个同样宽的元素，相对于两个中最大的元素，同时仅使用 html/css 保持灵活的 'structure'？

Question

我一直在尝试仅使用 html 和 css 来实现以下目标，但我似乎无法做到正确。考虑下图:

图像显示了两个所需的输出，具体取决于它们的伪媒体查询最小宽度:X 和最大宽度:X。媒体查询是什么并不重要，重要的是结构能够改变输出与图像匹配。

因此，我一直在努力解决的问题是在标记为“a”的灰色容器中设置单行文本，并使这些容器相对于两者中最大的容器具有相同的宽度。 'a' 的宽度适应可变长度的文本，不多也不少。我还希望 'a' 尽可能排在左侧。

请记住，我正在尝试仅使用 HTML 和 CSS 来完成此任务。

Answer 1

最终使用表格解决了我的问题。关键在于更改 td 元素的显示属性。

table {
  width:300px;
  background-color:#4192AD;
  margin-bottom:30px;
}

td {
  height:20px;
}

td:first-child{
    width:1%;
    white-space:nowrap;
    text-align:right;    
    background-color:#C6C6C6;
}

td:nth-child(2) {
  background-color:#73AD5A;
}

.alternate td {
  display:block;
  width:auto;
  text-align:left;
}

<table>
<tbody>
  <tr>
    <td>short-text</td>
    <td></td>
  </tr>
  <tr>
    <td>relatively-long-text</td>
    <td></td>
  </tr>
</tbody>
</table>

<table class='alternate'>
<tbody>
  <tr>
    <td>short-text</td>
    <td></td>
  </tr>
  <tr>
    <td>relatively-long-text</td>
    <td></td>
  </tr>
</tbody>
</table>