Question

我有一个有很多孩子和孙子的容器。我的目标是让容器的宽度与其子女/孙子相匹配。（CSS底部）

简易版本看起来像这样，有一些孩子的父母，它会根据孩子的增长/收缩而增长：http://jsfiddle.net/6qWg6/5/

<div id="container">
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 4</div>
</div>

当我添加孙子时出现困难：http://jsfiddle.net/6qWg6/4/

<div id="container">

    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 4</div>

    <div id="child_container">
        <div class="child">child 1</div>
        <div class="child">child 2</div>
        <div class="child">child 3</div>
        <div class="child">child 4</div>
        <div class="child">child 5</div>
        <div class="child">child 7</div>
        <div class="child">child 8</div>
        <div class="child">child 9</div>
        <div class="child">child 10</div>
    </div>

</div>

当我添加孙子时，容器的宽度为100％，这是我不想要的。如何在让我的容器宽度与其后代相匹配的同时添加孙子？

#container {
    float: left;
    border: 1px solid blue;
    display: inline-block;
    padding: 5px; 
}

#child_container {
    float: left;
    border: 1px solid red;
    padding: 5px; 
}

.child {
    width: 100px;
    float: left;
    border: 1px solid black;
}

Answer 1

你去了，我更新了你的小提琴

http://jsfiddle.net/6qWg6/7/

CSS

#container {
    float: left;
    border: 1px solid blue;
    display: inline;
    padding: 5px; 
}

#child_container {
    display: inline;
}

.child {
    width: 100px;
    float: left;
    border: 1px solid black;
    display: table-cell;
}

HTML

<div id="container">

    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 4</div>

    <div id="child_container">
        <div class="child">child 1</div>
        <div class="child">child 2</div>
        <div class="child">child 3</div>
        <div class="child">child 4</div>
        <div class="child">child 5</div>
        <div class="child">child 7</div>
        <div class="child">child 8</div>
        <div class="child">child 9</div>
        <div class="child">child 10</div>
    </div>

</div>

容器匹配儿童和孙子的宽度

1 个答案: