如何使父div的自动尺寸设置为其子div的宽度

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

html css

— 布拉德利4
source

Answers:

您的内部<div>元素可能都应该是float:left。自动将大小转换为容器宽度大小的100％。尝试在容器div上使用display:inline-block代替width:auto。或者float:left容器也适用overflow:auto。完全取决于您的追求。

— 疯子
source

感谢Madbreaks。我没有尝试做两个左浮球。

— bradley4

溢出自动为我做到了

— rustypaper

“ display：inline-block”是一种不错的方法，但是如果您要使用百分比值作为子元素的宽度，则它将无法按预期工作。有什么想法可以使其与百分比值一起工作吗？

— Mohsen Haeri

@MohsenHaeri，你不能。子项的宽度百分比是根据父项的宽度计算得出的。考虑一下，如果我有两个孩子，width: 50%父母的宽度是多少？

— Madbreaks

@Madbreaks我知道。这就是为什么我正在寻找一个黑客来做到这一点。可以使用Js方法，但是我无法弄清纯CSS方法。无论如何，感谢您的关注。

— Mohsen Haeri

父div（我认为最外面的div）是，display: block并且将填充它可以容纳的容器（在本例中为body）的所有可用区域。使用其他显示类型-inline-block可能是您要使用的显示类型：

http://jsfiddle.net/a78xy/

— 爆炸药
source