如何使父div自动调整其子div的宽度

Question

我正在尝试使父 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>

原文由 bradley4 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Madbreaks 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

http://jsfiddle.net/a78xy/

原文由 Explosion Pills 发布，翻译遵循 CC BY-SA 4.0 许可协议