三个具有自动宽度的 div 与最宽的 div 一样宽，使每个 div 与其内容一样宽

Question

我有三个 div .yellow-element 具有 width: auto 样式并且位于宽度也是 auto 的表格列内。它会导致表格变得和最宽的 div 一样宽和每个 div 都变得那么宽，即使它在内容方面不是必需的：

#info-table td {
    padding: 10px;
    border: 1px solid #ddd;

}

.info-table-1  {

    width: 100px;
}

.info-table-2  {
    width: auto;
}

.yellow-element  {
    font-size: 100%;    
    font-weight: bold;
    color: var(--body-font-color);
    background-color: yellow;
    border: 1px solid black;
    border-radius: 25px;
    padding: 5px;
    margin-right: 20px;

    width: auto;
    height: 30px;

    margin-bottom: 15px;
}

<table id="info-table">
  <tr>
    <td class='info-table-1'>Total Something:</td>
    <td class='info-table-2'>
       100500/100500
    </td>
  </tr>

  <tr><td class='info-table-1'>Yellow Elements:</td>
    <td class='info-table-2'>
      <div class='yellow-element' title='title1'>long long long long long long long long long long long long long text</div>

      <div class='yellow-element' title='title2'>average average average text </div>

      <div class='yellow-element' title='title3'>small text</div>

    </td></tr>
</table>

我看到的答案建议将display: inline-block 放在.yellow-element 类中，但是虽然它确实有效，但单独固定每个 div 的宽度，它会将它们都放在同一行，这不是我的我更喜欢。

Codepen：https://codepen.io/anon/pen/zeaXbL

Answer 1

您可以将.info-table-2 制作成一个弹性容器。这样您就可以更轻松地控制yellow-element 单元格的布局了。

#info-table td {
  padding: 10px;
  border: 1px solid #ddd;
}

.info-table-1 {
  width: 100px;
}

.info-table-2 {
  /* width: auto; */         /* <-- removed */
  display: flex;             /* <-- added */
  flex-direction: column;    /* <-- added */
  align-items: flex-start;   /* <-- added */
}

.yellow-element {
  font-size: 100%;
  font-weight: bold;
  color: var(--body-font-color);
  background-color: yellow;
  border: 1px solid black;
  border-radius: 25px;
  padding: 5px;
  margin-right: 20px;
  width: auto;
  height: 30px;
  margin-bottom: 15px;
}

<table id="info-table">
  <tr>
    <td class='info-table-1'>Total Something:</td>
    <td class='info-table-2'>
      100500/100500
    </td>
  </tr>

  <tr>
    <td class='info-table-1'>Yellow Elements:</td>
    <td class='info-table-2'>
      <div class='yellow-element' title='title1'>long long long long long long long long long long long long long text</div>

      <div class='yellow-element' title='title2'>average average average text </div>

      <div class='yellow-element' title='title3'>small text</div>

    </td>
  </tr>
</table>

https://jsfiddle.net/r3bwqn4u/1/

Answer 2

使用下面的：

.yellow-element {
   clear:both;
   float:left;
}