css:防止div宽度扩展到可用宽度

Question

如何防止div扩展？我希望div元素不占用100%的可用空间,并且具有它的孩子所具有的宽度.我需要这个水平居中父div.诀窍是子元素应该共享float:left或diplay:inline-block和fluid width,因此可以有很少行的子元素.

我无法将每一行包装在自己的div中,因为它会破坏响应式设计.

Answer 1

您应该使用display: table;它将收缩到它的内容的大小,也可以居中和定位,而无需指定给定的宽度.

演示http://jsfiddle.net/kevinPHPkevin/9VRzM/

Answer 2

您可以将子项的宽度属性设置为fit-content. 这样做将使这些元素只占用它们需要的水平空间，并且在父级中可用。

您也可以将宽度设置为，max-content但这将忽略父级的宽度，并且内容将扩展到任何后代需要的范围，并可能溢出父级。

示例：

问题设置：

.parent {
  width: 15rem;
  height: 5rem;
  border: 1px solid blue;
}

.child {
  border: 1px solid red;
}

<div class="parent">
  <div class="child">
    Content for child
  </div>
</div>

解决方案：

.parent {
  width: 15rem;
  height: 5rem;
  border: 1px solid blue;
}

.child {
  width: fit-content;
  border: 1px solid red;
}

<div class="parent">
  <div class="child">
    Content for child
  </div>
</div>

对 的支持fit-content非常好（caniuse？）。有支持fit-content在几乎所有主要的桌面浏览器（IE除外）和未知的支持上的一些移动浏览器。

Answer 3

你尝试过使用display: inline-block吗？DIV 将占据 100% 宽度，因为它们是块元素。