html - Parent Div 需要与多个孩子一起扩展

Question

我的父母 Div 需要与所有孩子一起扩展。子 div 是多个按钮，其 x 位置是递增的。

例子

div id="Parent"
  div id="Child" /div {X-position : 90}
  div id="Child2" /div {X-position : 180}
/div

任何想法将不胜感激

Answer 1

您可以通过将display: inline-block;or设置display: table;为父 div 来做到这一点，然后它将适合其子项的大小：

.Parent{
    background-color:red;
    display:inline-block;
    /* display: table;*/
}

.Child{
    background-color:blue;
    width:50px;
    heigth:50px;
}

你可以在这里看到演示：

.parent{
    background-color:red;
    display:table;
}

.child{
    background-color:blue;
    width:50px;
    height:50px;
}

<div class="parent">
    <div class="child">bbb</div>
    <div class="child">aaa</div>
    <div class="child">bbb</div>
    <div class="child">aaa</div>
    <div class="child">bbb</div>
    <div class="child">aaa</div> 
</div>