0

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

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

JSFiddle 链接

#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;
}
4

2 回答 2

2

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

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

2) 在 CSS 中，您可以在父容器上设置“位置：绝对”或“浮动”。这可能也需要对您的结构进行其他调整，但是父容器会自动“收缩包装”到其内容的大小。

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

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

于 2014-05-04T00:45:26.873 回答
0

删除 javascript，然后从 hmtl 中的 img 标记中删除宽度属性，并按如下方式添加/更改 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%;
}
于 2014-05-03T23:47:19.030 回答