gpt4 book ai didi

html - 容器匹配 children AND grandchildren 宽度

转载 作者:太空宇宙 更新时间:2023-11-04 13:45:31 26 4
gpt4 key购买 nike

我有一个容器,里面有很多子孙。我的目标是让容器的宽度与其子代/孙代相匹配。 (底部的 CSS)

简单版本看起来像这样, parent 有一些 child ,它的增长/收缩依赖于 child :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;
}

最佳答案

好了,我更新了你的 fiddle

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>

关于html - 容器匹配 children AND grandchildren 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22547431/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com