親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
ソース

回答:

あなたの内部<div>要素はおそらく両方であるはずfloat:leftです。サイズをコンテナ幅のサイズの100％に自動的に分割します。コンテナdivのdisplay:inline-block代わりに使用してみてくださいwidth:auto。または、おそらくfloat:leftコンテナと適用しますoverflow:auto。あなたが正確に何を求めているかに依存します。

— マッドブレイク
ソース

Madbreaksに感謝します。両方の左フロートを作ることは私が試みなかったものです。

— bradley4 2013

オーバーフローの自動車は私のためにそれをやった

— rustypaper

「display：inline-block」は良い方法ですが、子要素の幅にパーセンテージ値を使用したい場合は、期待どおりに機能しません。パーセンテージ値でも機能させるためのアイデアはありますか？

— MohsenHaeri20年

@MohsenHaeriできません。子の幅のパーセンテージは、親の幅から計算されます。width: 50%親の幅が広い子供が2人いる場合は、考えてみてください。

— マッドブレイク

@Madbreaks私はそれを知っています。だから私はそれを行うためのハックを探しています。Jsの方法は利用できますが、純粋なcssの方法を理解できませんでした。とにかく、ご清聴ありがとうございました。

— MohsenHaeri20年

親div（私は最も外側のdivを想定しています）はdisplay: block、コンテナー（この場合は本体）の使用可能なすべての領域を埋めることができます。別の表示タイプを使用してください-inline-blockおそらくあなたが目指しているものです：

http://jsfiddle.net/a78xy/

— 爆発の丸薬
ソース