Html 使具有绝对位置的父div具有子div的宽度

我有以下html结构：

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

父对象是绝对定位的，child1和child2使用内联块并排显示。 我需要这整件事是有反应的基础上的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>

.行动(一)货柜{
显示：块；
位置：绝对位置；
}
.行动{
边框：1px纯黑；
}
.行动{
最小宽度：120px；
最小高度：50px；
背景色：白色；
边框：1px实心#666；
边界半径：5px；
}
.行动(标题){
字体大小：12px；
字体大小：粗体；
文本对齐：居中；
边框底部：1px实心#ccc；
填充：3倍；
}
.action_args_部分{
显示：内联块；
框大小：边框框；
-moz框大小：边框框；
填充：3倍；
}
.操作输出部分{
显示：内联块；
宽度：50px；
垂直对齐：顶部；
框大小：边框框；
-moz框大小：边框框；
填充：3倍；
}

.parent{
位置：绝对位置；
高度：50px；
边框：1px纯红；
}
.儿童1{
宽度：100px；
高度：30px；
边框：1px纯绿色；
}
.儿童2{
宽度：150px；
高度：30px；
边框：1px纯蓝色；
}

---

请参见JSFIDLE中的示例解决方案

使用此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，然后我们可以帮助你{

.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>

位置：绝对位置； 左：60px； 顶部：60px； 宽度：自动； 高度：自动； 边框：1px纯黑； } .父母，孩子{ 显示：内联块； 边框：1px纯蓝色； } AAAAA SSSSSS SSSSSSCCCCCCCCCCCCCCCC

---

尝试使用“最大宽度”设置父div的最大宽度，使其不超过指定的宽度。

我很容易做到这一点。更改div的宽度也会更改父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>

div{边框：1px纯黑色；}
.家长{
位置：绝对位置；
宽度：自动；
高度：自动；
}
.儿童1{
显示：内联块；
宽度：40px；
高度：40px；
}
.儿童2{
显示：内联块；
宽度：30px；
高度：40px；
}

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

如果您只希望父级根据子div的绝对大小调整大小，请将

高度：自动；宽度：自动

添加到父级。然后，将子div更改为

显示：块；浮动：左

。父级将相应调整大小

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;
}

.parent{
浮动：左；
位置：绝对；
背景颜色：黄色；
宽度：自动；
高度：自动；
}
.家长组{
浮动：左；
显示：内联块；
宽度：100px；
高度：100px；
背景色：红色；
}

这
这

使用此技巧可以将子元素设置为单行，并将父元素设置为从中获取宽度。不要对任何内容应用浮动。如果需要在子元素中保留单行，请记住关于空格：nowrap

---

这里是。

你也可以发布你的CSS吗？…需要看看你已经在每个div上定义了什么样式…你能看到使用inspect元素应用在每个div上的slyles吗？否则你必须给我们一些提琴来处理。根据代码更新，我不确定你在寻找什么。你想让这个框按原样调整大小吗窗口会调整大小？或者你只是想让父div与子div的宽度相适应？因为这和“响应”意味着两件不同的事情。action\u inner必须在action\u主体内获取两个div的宽度。现在，只有在我取下位置时才会发生这种情况：相对离开action\u容器。。。

.parent{

  position: absolute;
  display: table;

}

.child{

  position: relative;
  display: table-cell;

}