html - 使具有绝对位置的父div占用子div的宽度

Question

我有以下 html 结构:

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

parent 是绝对定位的，child1 和 child2 使用 inline-block 并排显示。我需要根据 2 个子 div 的宽度来响应整个事情。问题是，如果我增加其中任何一个的宽度，父级的宽度将保持不变。将其位置更改为相对位置可以解决此问题，但我必须绝对拥有它。无论如何让它响应？

编辑:

我希望这很简单，但显然没那么简单... :(这是实际的 HTML:

<div class="action_container">
    <div class="action_inner">
        <div class="action_title">Format Text</div>
        <div class="action_body">
            <div class="action_args_section"></div>
            <div class="action_output_section"></div>
        </div>
    </div>
</div>

还有 CSS:

<style>
    .action_container {
        display: block;
        position: absolute;
    }

    .action_inner {
        border: 1px solid black;
    }

    .action_inner {
        min-width: 120px;
        min-height: 50px;
        background-color: white;
        border: 1px solid #666;
        border-radius: 5px;
    }

    .action_title {
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        border-bottom: 1px solid #ccc;
        padding: 3px;
    }

    .action_args_section {
        display: inline-block;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        padding: 3px;
    }

    .action_output_section {
        display: inline-block;
        width: 50px;
        vertical-align: top;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        padding: 3px;
   }
</style>

Answer 1

.parent{

  position: absolute;
  display: table;

}

.child{

  position: relative;
  display: table-cell;

}

使用此技巧将子项设置为单行，并将父项设置为从中获取宽度。不要将 float 应用到任何地方。如果您需要在子元素中保持单行，请记住 white-space: nowrap;。

这里是 fiddle .