So machen Sie eine übergeordnete Div-Auto-Größe auf die Breite ihrer untergeordneten Divs

81

Ich versuche, das Eltern-Div nur so breit zu machen wie das Kind-Div. Durch die automatische Breite passt das übergeordnete Div auf den gesamten Bildschirm. Die untergeordneten Divs sind je nach Inhalt unterschiedlich breit, daher muss das übergeordnete Div entsprechend angepasst werden.

<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 bradley4
quelle

Antworten:

91

Ihre Innenelemente <div>sollten wahrscheinlich beides sein float:left. Divs Größe auf 100% der Größe ihrer Containerbreite automatisch. Versuchen Sie es mit display:inline-blockanstatt width:autoauf dem Container div. Oder möglicherweise float:leftden Behälter und auch anwenden overflow:auto. Kommt darauf an, wonach du genau suchst.

Madbreaks
quelle
Danke Madbreaks. Beide linken Schwimmer zu machen, habe ich nicht versucht.
Bradley4
Überlauf Auto hat es für mich
getan
"display: inline-block" ist eine gute Möglichkeit, aber wenn Sie den Prozentwert für die Breite des untergeordneten Elements verwenden möchten, funktioniert dies nicht wie erwartet. Haben Sie eine Idee, damit es auch mit den Prozentwerten funktioniert?
Mohsen Haeri
@MohsenHaeri kannst du nicht. Die prozentuale Breite für das Kind wird aus der Breite des Elternteils berechnet. Denken Sie darüber nach, wenn ich zwei Kinder habe, mit width: 50%wie breit ist der Elternteil?
Madbreaks
@ Madbreaks Das weiß ich. Deshalb suche ich einen Hack, um das zu tun. Js Wege sind verfügbar, aber ich konnte keinen reinen CSS-Weg finden. Trotzdem danke für deine Aufmerksamkeit.
Mohsen Haeri
28

Das übergeordnete Div (ich nehme an, das äußerste Div) ist display: blockund wird den gesamten verfügbaren Bereich seines Containers (in diesem Fall den Körper) ausfüllen, den es kann. Verwenden Sie einen anderen Anzeigetyp - inline-blockwahrscheinlich das, was Sie wollen:

http://jsfiddle.net/a78xy/

Explosionspillen
quelle