让父级div采用绝对定位并且宽度与子级div相同

Question

我有以下HTML结构：

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

父元素使用绝对定位，子元素1和子元素2使用inline-block显示在一起。我需要根据两个子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>

- Luoruize

---

你能否也发布一下你的CSS代码......需要查看你已经在这些div上定义了哪些样式.... - Phani

你能否通过检查元素看到应用在每个div上的样式？否则，您需要提供一些示例以供我们使用。 - Marikkani Chelladurai

根据代码更新，我不确定您要寻找什么。您是希望在窗口调整大小时，盒子也随之调整大小吗？还是只想让父级div适应子级div的宽度？因为这两个概念和“响应式”意义不同。 - Brian

action_inner必须占用action_body内两个div的宽度。目前，只有在将position: relative从action_container中移除时才会发生这种情况... - Luoruize

Answer 1

.parent{

  position: absolute;
  display: table;

}

.child{

  position: relative;
  display: table-cell;

}

使用此技巧将子元素设置为单行，并从它们中获取父元素的宽度。不要对无内容应用浮动。如果需要保持子元素单行，请记住使用white-space: nowrap;。这里是fiddle。

- Bartek Cholewa

Answer 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

- Nick

Answer 3

在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，然后我们可以帮助您

- mannyyysh

Answer 4

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

- Gurkan İlleez

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

- Ian Hazzard

Answer 6

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

如果您只希望父元素根据子div的绝对大小调整大小，请在父元素中添加height:auto; width:auto。 然后，将子div更改为display:block; float:left。 父元素将相应地调整大小。

更新的CodePen演示

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

- Brian

Answer 7

尝试使用 max-width 来为父级 div 设置最大宽度，以便它不会超过指定的宽度。

- user2934155

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

Here's The Code You Need :)

- Samer Allahham