DIV nicht anpassen Breite Inhalt in ein anderes DIV mit overflow: auto

Habe ich folgenden HTML-code:

<div class="main">
    <div class="container">
        <div class="contents">
            Some funny stuff in here
        </div>
    </div>
</div>

Mit den folgenden CSS:

.main {
    overflow: auto;
    width: 200px;
}
.container {
    border: 1px solid black;
}
.contents {
    width: 300px;
}

Dies ist, was diese Seite hat (siehe es an http://jsfiddle.net/C7RDh/7/):

  • main div ist 200px Breite mit overflow: auto (d.h. Schriftrollen Inhalt, wenn breiter als 200px).
  • So, als contents div-Element 300px breit, es scrollt horizontal.
  • So, würde ich erwarten, dass container div werden 300px (wie Elemente drin sind 300px breit), aber es ist nicht! Es ist 200px breit.

Wie kommt das? Ich möchte es so breit ist wie sein Inhalt (300px), wie kann ich das erreichen?

InformationsquelleAutor German Latorre | 2013-01-25

  1. 2

    Müssen Sie nur machen Sie container float

    .container {
     border: 1px solid black;
     float: left;
 }

    Float-passt sich automatisch Ihrem äußeren div-inner-div-Breite.

    Es funktioniert eigentlich toll, aber warum braucht die container div nicht anpassen, selbst ohne die float: left Stil?
    innere div, nimmt die Breite des äußeren div-ohne float, was bedeutet, dass Ihre äußere div (in diesem Fall .main 200px, damit Sie Ihre innere div .container findet automatisch alle 200px), unabhängig davon, was Ihre .Inhalte von div-Breite
    Ich schlage vor, Sie verwenden diese Antwort, anstatt die andere Antwort.
    Es scheint, dass entweder float: left; oder display: inline-block; perfekt funktionieren. stackoverflow.com/questions/6213237/... erklärt einige ähnliche problem ganz gut. DIV scheint zu erweitern standardmäßig 100%, und in meinem Fall container's 100% main's Breite: 200px

    InformationsquelleAutor zdesam

  2. 0

    Müssen Sie leicht anpassen Ihre CSS-Dateien. Dies funktioniert:

    .main {
  overflow: auto;
  width: 200px;
  float: left;
}
.container {
  border: 1px solid black;
  float: left;
}

.contents {
  width: 300px;
  float: left;
}
    Einfach nur neugierig, können Sie erklären, warum das funktioniert? Hätte ich im gleichen Boot wie @antur123, wie ich bin nicht ein css-master.
    Ich Stimme mit @John, warum funktioniert dies und das "zu erwartende" (aus meiner Sicht) Stil nicht funktioniert?
    Ziemlich gut erklärt: coding.smashingmagazine.com/2007/05/01/... Genießen.
    Ich kann nichts über overflow: auto; und float: left; zusammen...
    Warum denken Sie, sollten Sie sehen, dass? Weil float und overflow haben nichts gemeinsam. Überlauf wird einfach, dass Ihr container passen in einen Inhalt, der normalerweise passten nicht durch die Einführung von vertikalen und/oder horizontalen scrollbars.

    InformationsquelleAutor semir.babajic

  3. -1

    Eigentlich sollten Sie die overflow: auto im container css, die nicht Haupt-css -

    Das ist nicht mein Fall, ich Frage dies, weil ich ein Szenario, in dem ich umgehen muss mit einer ähnlichen situation, keine chance, das zu tun, was Sie vorschlagen

    InformationsquelleAutor Bruce.zhang

Schreibe einen Kommentar