如何将父元素宽度修复为其子元素之一？

Question

我可以将div.main的宽度固定为与table.tbl2相同吗？在下面的示例中，我需要inline4位于第二行，div.main的宽度等于table.tbl2的宽度。

.container {
  text-align: center;
}

.main {
  display: inline-block;
  border: 1px solid black;
}

.tbl1 {
  width: 100%;
}

.tbl2 {
  border: 1px solid red;
  border-collapse: collapse;
}

.tbl2 td {
  border: 1px solid red;
}

.inline-div {
  display: inline-block;
}

<div class="container">
  <div class="main">

    <table class="tbl1">
      <tr>
        <td>text text text text</td>
      </tr>
    </table>

    <table class="tbl2">
      <tr>
        <td>text 1</td>
        <td>text 2</td>
        <td>text 3</td>
        <td>text 4</td>
      </tr>
    </table>

    <div class="inline-div">inline1</div>
    <div class="inline-div">inline2</div>
    <div class="inline-div">inline3</div>
    <div class="inline-div">inline4</div>

  </div>
</div>

Answer 1

一个想法是使元素不受流动影响，因此它们不会影响宽度。这不是一般解决方案，因为您需要根据每种情况调整一些事项。

＆＃13;

＆＃13;

.container {
  text-align: center;
}

.main {
  display: inline-block;
  border: 1px solid black;
  border-bottom:0;
  position:relative;
}

.tbl1 {
  width: 100%;
}

.tbl2 {
  border: 1px solid red;
  border-collapse: collapse;
}

.tbl2 td {
  border: 1px solid red;
}
.bottom {
  position:absolute;
  right:-1px;
  left:-1px;
  top:100%;
  border:1px solid black;
  border-top:none;
}

.inline-div {
  display: inline-block;
}

＆＃13;

<div class="container">
  <div class="main">

    <table class="tbl1">
      <tr>
        <td>text text text text</td>
      </tr>
    </table>

    <table class="tbl2">
      <tr>
        <td>text 1</td>
        <td>text 2</td>
        <td>text 3</td>
        <td>text 4</td>
      </tr>
    </table>
    <div class="bottom">
    <div class="inline-div">inline1</div>
    <div class="inline-div">inline2</div>
    <div class="inline-div">inline3</div>
    <div class="inline-div">inline4</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;