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>

Answer 1

您的内部<div>元素可能都应为float:left。将尺寸划分为容器宽度的100％自动。尝试在容器div上使用display:inline-block代替width:auto。或者可能float:left容器，也可以应用overflow:auto。取决于你究竟追求的是什么。

Answer 2

父div（我假设最外面的div）是display: block并且将填充其容器的所有可用区域（在这种情况下，身体）。使用不同的显示类型 - inline-block可能就是您想要的：

http://jsfiddle.net/a78xy/

如何使父div自动大小为其子div的宽度

2 个答案: