使容器与其内容的宽度相同答案

【问题标题】：Making the container the same width of its content使容器与其内容的宽度相同
【发布时间】：2013-12-28 05:23:11
【问题描述】：

我正在制作一个包含内容框的页面，并且这些框是响应式的，因此当没有足够的空间时，会出现换行符并掉到另一行。我想相对于顶部最右边的框绝对定位某些东西，所以我需要一个容器具有完全相同的框宽度，即使我调整窗口大小，然后我可以定位：绝对我想要的元素放在那里。

我遇到了this post。它告诉我使用display:inline-block; 来解决问题，但它并没有像我预期的那样工作。请参阅我的示例here。我希望蓝色边框容器在调整大小时与其内容的宽度完全相同，但不会更宽。

我也试过display:inline;，but it变成两行。我希望它放在一个盒子里，所以当我使用 right:0 时，它不会引用底部的最后一个盒子。

对这个问题有任何想法吗？谢谢！

【问题讨论】：

如果我理解这个问题，您的第一个示例似乎在 chrome 中运行良好。你用的是什么浏览器？
没有。我的意思是当我在示例中调整窗口大小时，容器的宽度与其内容的宽度不完全相同，但它比应有的宽度更宽。我正在使用铬。也许让我编辑问题以澄清我的意思。
您能否提供您要查找的内容的说明，例如图片？猜测您想要的细节对我们没有任何好处。
Here，我删除了边距来说明问题。由于红色框现在每个宽度为 30px，我想要的是使蓝色容器的宽度为 30 的倍数，因此它完全用红色框填充，没有间隙。它不应该有任何机会拥有像 160px 这样的宽度，即使浏览器窗口是这样的。

标签： css resize width containers

【解决方案1】：

这是你的意思吗？ http://jsfiddle.net/WH6XD/4/

.box_holder {
    border:1px solid red;
    display:inline-block;
    white-space:nowrap;  //new line
    padding:10px;  //new line
}
.box {
    width:30px;
    height:20px;
    margin-left:10px;  //changed from margin
    background-color:red;
    display:inline-block;  
    vertical-align:top;  //new line
}

.box:first-child {  //new rule
    margin-left:0;
}

【讨论】：

【解决方案2】：

您可能需要设置一个“最小宽度：XXXpx；”描述符以防止窗口调整容器的大小。 “显示：内联块；”简单地告诉 div 阻止默认块属性，该属性告诉每个连续的 div 被视为换行符。当内容窗口空间已满时，它不会阻止发生换行符。将其视为使 div 在文本字段中充当字母，当使用的空间已满时，它会中断到下一行。

【讨论】：