Updated CodePen Demo

Question

我有以下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>

Answer 1

.parent{

  position: absolute;
  display: table;

}

.child{

  position: relative;
  display: table-cell;

}

使用此技巧在单行中设置子项，使用父项从中获取宽度。不要把浮子什么都没用。并记住 white-space：nowrap; 如果您需要在子元素中保留单行。

这是fiddle。

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

这是你正在寻找的吗？

JSFiddle

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

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>

Answer 5

尝试使用max-width设置父div的最大宽度，使其不会超出指定范围。

Answer 6

我很容易做到了。更改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>

Answer 7

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

如果您只是希望父级根据子div的绝对大小调整大小，请将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;
}

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>

这是您需要的代码：）

使用绝对位置的父div获取子div的宽度

8 个答案:

Updated CodePen Demo