Question

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

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

Answer 1

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

DEMO http://jsfiddle.net/kevinPHPkevin/9VRzM/

Answer 2

您可以将子级的width属性设置为fit-content。这样做将使这些元素仅占据所需的水平空间，并在父级中可用。

您还可以将width设置为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，Edge和Opera以外的所有浏览器都至少支持fit-content。

Answer 3

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

Answer 4

如果你真的希望父div围绕其子元素崩溃（无论出于何种原因，基于你想要完成的事情），然后你想要将div居中，然后@ Vector的答案就在了，请display: table使用margin: 0 auto。

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

您可以使用text-align: center。

＆＃13;

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

＆＃13;

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

＆＃13;

您还可以将较新的display: flex与justify-content: center一起使用，具体取决于您支持的浏览器兼容性级别。

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: