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

【问题标题】：css : prevent div width from expanding to available widthcss : 防止 div 宽度扩展到可用宽度
【发布时间】：2013-08-10 16:16:18
【问题描述】：

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

我不能将每一行包装在自己的 div 中，因为它会破坏响应式设计。

【问题讨论】：

有几种可能：display:inline-block 对此有好处（注意IE7 hack）
将 display: inline-block 设置为父级并用容器包裹它 text-align: center;
因为这似乎是一个微不足道的问题，它可能有助于显示您的 HTML，以便我们了解您面临的挑战。
设置 display:inline block 不会阻止子元素超过一行时元素展开
您是否尝试设置静态宽度以及最大宽度？

标签： html css css-float css-position

【解决方案1】：

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

【讨论】：

这应该是一条评论。
这将折叠 div，但不会（轻松）居中。

【解决方案2】：

你应该使用display: table;它会缩小到内容的大小，也可以居中和定位，而无需指定给定的宽度。

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

【讨论】：

尝试给子元素设置float:left或者display:inline-block，会出问题
@vlad 我实际上尝试设置float:left 和display: inline-block，但没有发现问题。在这些情况下，父容器将尽可能地扩展以允许子元素填充可用宽度。您可以使用父容器的最大宽度属性来限制宽度。
更多文本时仍会扩展

【解决方案3】：

如果您真的希望父 div 围绕其子元素折叠（无论出于何种原因，取决于您要完成的工作），然后您想要将 div 居中，那么@Vector 的答案就是现货开，使用display: table 和margin: 0 auto。

如果div 可以保持扩展到您试图让孩子居中的容器的整个宽度是可以的，那么您至少还有几个选择，这取决于您的具体情况。

您可以使用text-align: center。

.content {
  text-align: center;
  border-style: solid;
  border-width: thin;
}

.content span {
  display: inline;
  border-style: solid;
  border-width: thin;
}

<div class="content">
  <div>Test</div>
  <div>Test</div>
</div>

当然，您也可以使用较新的 display: flex 和 justify-content: center，具体取决于您支持的浏览器兼容性级别。

.content {
  display: flex;
  justify-content: center;
  border-style: solid;
  border-width: thin;
}

.content div {
  border-style: solid;
  border-width: thin;
}

<div class="content">
  <div>Test</div>
  <div>Test</div>
</div>

【讨论】：

【解决方案4】：

您可以将孩子的宽度属性设置为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?）。几乎所有主要的桌面浏览器（IE 除外）都支持fit-content，而一些移动浏览器的支持未知。

【讨论】：