Jak zmienić rozmiar automatycznego nadrzędnego elementu div na szerokość jego podrzędnych elementów div

Staram się, aby nadrzędny element DIV był tylko tak szeroki, jak podrzędny element DIV. Automatyczna szerokość powoduje, że nadrzędny element DIV dopasowuje się do całego ekranu. Elementy div podrzędne będą miały różne szerokości w zależności od ich zawartości, więc potrzebuję, aby element nadrzędny został odpowiednio dostosowany.

<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
źródło

Odpowiedzi:

Twoje <div>elementy wewnętrzne prawdopodobnie powinny być float:left. Rozmiar elementów DIV do 100% rozmiaru ich kontenera automatycznie. Spróbuj użyć display:inline-blockzamiast width:autow kontenerze div. Lub ewentualnie float:leftpojemnik i również zastosuj overflow:auto. Zależy od tego, czego dokładnie szukasz.

— Madbreaks
źródło

Dzięki, Madbreaks. Nie próbowałem zrobić obu lewych pływaków.

— bradley4

overflow auto zrobiło to za mnie

— rustypaper

"display: inline-block" to fajny sposób, ale jeśli chcesz użyć wartości procentowej dla szerokości elementu podrzędnego, nie będzie to działać tak, jak się spodziewasz. Masz jakiś pomysł, żeby to działało również z wartościami procentowymi?

— Mohsen Haeri

@MohsenHaeri nie możesz. Procentowa szerokość dziecka jest obliczana na podstawie szerokości rodzica. Pomyśl o tym, jeśli mam dwoje dzieci z width: 50%jak szerokim rodzicem?

— Madbreaks

@Madbreaks Wiem to. Dlatego szukam hacka, aby to zrobić. Sposoby js są dostępne, ale nie mogłem znaleźć czystego sposobu CSS. W każdym razie dziękuję za uwagę.

— Mohsen Haeri,

Nadrzędny element DIV (zakładam, że najbardziej zewnętrzny element DIV) jest display: blocki będzie wypełniał cały dostępny obszar swojego pojemnika (w tym przypadku ciała), jaki może. Użyj innego typu wyświetlacza - inline-blockprawdopodobnie to, do czego zmierzasz:

http://jsfiddle.net/a78xy/

— Pigułki wybuchowe
źródło