Question

我正在尝试根据内容调整父容器的大小。目前，它使用百分比作为宽度。不幸的是，图像容器没有根据其内容调整大小。

有没有办法根据子容器的父宽度（包括内容）调整子容器的大小，或者让父容器调整大小？或者儿童内容（即图像）是否应该具有不同的大小而不是固定大小？非常感谢。

#content {
margin-top: 58px;
margin-right: 1.0416667%;
/* 10 div 960 */
float: right;
background-color: #dedede;
width: 72.7083333%;
/* 698 div 960 */
}

#gallery_container {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    background-color: #302200;
}
#gallery_container ul li {
    display: inline;
}
#gallery_container ul li img {
    padding-top: 10px;
}

Answer 1

当您希望父容器自动匹配其内容的大小时，您基本上有三个选项：

1）在HTML中，您可以使用TABLE。表已经内置了这种功能，并且它们无处不在。表格还可以轻松地组合固定大小和动态大小。

2）在CSS中，您可以在父容器上设置“position：absolute”或“float”。这可能还需要对您的结构进行其他调整，但父容器将自动“收缩 - 换行”到其内容的大小。

3）在Javascript中，您可以计算内容的大小，然后设置父级的大小。但是，这往往很慢，因为您需要计算内容的大小，这往往是递归的并且需要大量的DOM查询。

如果这不能回答您的问题，请通过告诉我们您提到的JSFiddle演示中的所需行为来澄清。现在，我不确定你真正想要改变哪个DIV ID的功能，而且最重要的是，我不确定你希望它如何改变。

Answer 2

删除javascript，然后从hmtl中的img标签中删除width属性，并为流体大小调整库添加/更改css，如下所示：

ul {
    margin:0;
    padding:0;
    list-style: none;
}
#wrapper {
    width: 100%;
}
#navigation {
    width: 100%;
}
#sidebar {
    padding-left: 1.0416667%;
    margin-left: 1.0416667%;
}
#gallery_container {
    margin: 0px auto;
    text-align: center;
    width: 90%;
}
#gallery_container img {
    width: 27%;
    margin: 2%;
}

根据子内容调整父容器的大小

2 个答案: