95

我正在尝试使父 div 仅与子 div 一样宽。自动宽度使父 div 适合整个屏幕。子 div 将根据其内容具有不同的宽度，因此我需要父 div 进行相应调整。

<div style='width:auto;'>
  <div style="width: 135px; float: left;">
    <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4>
    <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
      <dd style="white-space: nowrap;">1</dd>
      <dd style="white-space: nowrap;">2</dd>
    </dl>

    <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4>
    <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
      <dd style="white-space: nowrap;">1</dd>
      <dd style="white-space: nowrap;">2</dd>
    </dl>
  </div>

  <div style="width: 135px; float: right;">
    <h4 style="padding-right: 5px; padding-left: 10px;">Column2</h4>
    <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">
      <dd style="white-space: nowrap;">1</dd>
      <dd style="white-space: nowrap;">2</dd>
      <dd style="white-space: nowrap;">3</dd>
    </dl>
  </div>
</div>
4

3 回答 3

110

你的内部<div>元素应该都是float:left。Divs 大小自动调整为其容器宽度大小的 100%。尝试在容器 div 上使用display:inline-block而不是。width:auto或者可能float:left是容器并且也适用overflow:auto。取决于你究竟追求什么。

于 2013-02-27T01:15:28.760 回答
36

父 div（我假设最外层的 div）正在display: block并且将填满其容器（在本例中为主体）的所有可用宽度。使用不同的显示类型——inline-block可能是你想要的：

http://jsfiddle.net/a78xy/

于 2013-02-27T01:16:55.820 回答
6

这是让父 div 继承其子宽度的最简单方法。

.container-fluid {
  border: 1px solid black;
  /*the needed css class to make your parent div responsive to it's children's max-width
  */
  width: max-content
}
.wrapper {
  border: 1px solid red;
  width: 300px
}
<div class="container-fluid">
  <div class="wrapper">xxx</div>
</div>

我希望有人觉得这很有用

于 2021-12-17T13:51:40.513 回答