【问题标题】：Make parent div with absolute position take the width of children divs使具有绝对位置的父 div 采用子 div 的宽度
【发布时间】：2017-03-01 17:16:52
【问题描述】：

我有以下html结构：

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

父级是绝对定位的，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>

【问题讨论】：

你能不能也发布你的 CSS ......需要看看你已经在每个 div 上定义了哪些样式......
你能看到使用检查元素应用于每个 div 的 slyles 吗？否则，您必须给我们一些麻烦。
根据代码更新，我不确定您在寻找什么。您是否希望该框随着 window 调整大小而调整大小？或者您只是希望父 div 适合子 div 的宽度？因为那和“响应式”意味着两个不同的东西。
action_inner 必须采用 action_body 内两个 div 的宽度。现在，只有当我采取以下立场时才会发生这种情况：相对于 action_container...

标签： html css responsive-design

【解决方案1】：

.parent{

  position: absolute;
  display: table;

}

.child{

  position: relative;
  display: table-cell;

}

使用此技巧将子级设置为单行，并使用父级从它们获取宽度。不要将浮动应用于任何内容。如果您需要在子元素中保留单行，请记住 white-space: nowrap;。

这里是fiddle。

【讨论】：

【解决方案2】：

.parent {
    position:absolute;
    height:50px;
    border:1px solid red;
}
.child1 {
    width:100px;
    height:30px;
    border:1px solid green;
}
.child2 {
    width:150px;
    height:30px;
    border:1px solid blue;
}

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

这就是你要找的吗？

JSFiddle

【讨论】：

【解决方案3】：

.parent{
            position:absolute;
            left : 60px;
            top : 60px;
            width : auto;
            height:auto;
            border:1px solid black;
        }
        .parent .child{
            display:inline-block;
            border:1px solid blue;
        }

<div class="parent">
    <div class="child">aaaaaassssssssssssss</div>
    <div class="child">sssssssccccccccccccccccccc</div>
</div>

【讨论】：

【解决方案4】：

尝试使用 max-width 为父 div 设置最大宽度，这样它就不会比指定的宽。

【讨论】：

【解决方案5】：

我很容易做到了。更改 div 的宽度也会更改父级。

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

<style>

div{border:1px solid black;}

.parent{

position:absolute;
width:auto;
height:auto;
}

.child1{
display:inline-block;
width:40px;
height:40px;
}

.child2{
display:inline-block;
width:30px;
height:40px;
}

</style>

【讨论】：

【解决方案6】：

如果您想要响应式设计，请确保您使用的是百分比，而不是像素值，因为 div 的大小将由视口宽度计算。

如果您只想让父级根据子级 div 的 absolute 大小调整大小，请将 height:auto; width:auto 添加到父级。然后，将子 div 更改为 display:block; float:left。父级将相应地调整大小。

Updated CodePen Demo

CSS

.action_container {
    display: block;
    position: absolute;
    height:auto;
    width:auto;
}
.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: block;
    float:left;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 3px;
    width:300px;
    border: 1px solid red;
}
.action_output_section {
    display: block;
    float:left;
    width: 150px;
    vertical-align: top;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 3px;
    border: 1px solid blue;
}

【讨论】：

【解决方案7】：

在 jsfiddle link 中查看示例解决方案

使用这个 CSS：

.parent{
    position:fixed;
    background-color:blue;
    height:auto;
    width:auto;
}
.child1{width:200px;background-color:black;height:200px;float:left;}
.child2{width:200px;background-color:red;height:200px; float:left;}

如果不是您要的内容，您可以在此处编辑您的 css，我们可以提供帮助

【讨论】：

【解决方案8】：

.parent{
  float: left;
  posetion: absolute;
background-color: yellow;
  width:auto;
  height: auto;
}
.parent div{
  float: left;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  }

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

这是您需要的代码:)

【讨论】：