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です。サイズをコンテナ幅のサイズの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 に答える