Kind divs nicht einwickeln nach innen zu bleiben Elternteil

Werfen Sie einen Blick auf diese Geige. http://jsfiddle.net/mstwp/

Html:

<div id="parent" style="width: 150px; display: inline-block; white-space: nowrap">

    <div id="one" class="kids">
        <span>Hi</span>
    </div>

    <div id="two" class="kids">
        <span>Bob like to play on his violin</span>
    </div>

</div>

mit CSS:

#parent {
    background-color: #aaaaaa
}
#one {
    background-color: #ff0000
}

#two {
    background-color: #00ff00
}

.kids {
    display: inline-block;
    padding: 2px;
    white-space: normal;
}

Wie kann ich das div #zwei wrap früher so, dass ich beide behalten Kind divs innerhalb des Eltern-div?

InformationsquelleAutor Erik | 2014-04-26

  1. 2

    Entfernen Sie einfach die Breite angebracht, um das übergeordnete Element. Es zwingt die Eltern-div zu erhöhen Ihre Höhe, um Platz für die Inhalte in den div -#two. SO halten Sie die parent-div als solche:

    <div id="parent" style="display: inline-block; white-space: nowrap">

    Werden und dies sollte den trick tun für Sie.

    Abwechselnd, man könnte hinzufügen, ein min-height, das übergeordnete div so, dass es automatisch kommt, seine Breite auf der Grundlage der Inhalte innerhalb seiner Kind. Damit Ihre übergeordneten div-Element könnte wie folgt Aussehen:

    <div id="parent" style="min-width: 150px; display: inline-block; white-space: nowrap">

    Hoffe, das hilft!!!

    EDIT: Ihr Kind divs schon wickelt sich innerhalb des übergeordneten div. Das ist 'offenbart', wenn Sie fügen Sie eine kleine Breite zu einer der untergeordneten div-Element namens two.

    Finden Sie hier : http://jsfiddle.net/K2xn5/

    Wenn Sie möchten, div two zu wickeln innerhalb der parent div, dann gibt es keinen Punkt in der Befestigung eine Feste Breite, die parent. Stattdessen müssen Sie eine Feste Breite für das div benannt two. Dies würde dann besetzen den Raum, DEFINIERT durch den Inhalt. Ihre parent div würde dann einfach immer erweitert, basierend auf der Größe seiner Kinder, in diesem Fall div one und two.

    Schauen Sie sich diese Geigen :

    Feste Breite zu Kind, keine Breite der Eltern: http://jsfiddle.net/K2xn5/1/

    Kind div Umhüllung selbst, basierend auf der Größe des Inhalts: http://jsfiddle.net/K2xn5/2/ und http://jsfiddle.net/K2xn5/3/

    Hoffe, das hilft!!!

    Wenn ich entfernen die Breite vom parent, dann ist es die Größe des übergeordneten passt alles ohne Verpackung. Das ist nicht das, was ich will.
    Bitte sehen Sie sich den Bearbeiten. Ich denke, dies sollte Ihr problem lösen.
    Okay, ich kann das verwenden, um meine Annäherung ändern, damit es funktioniert. Ich hatte angenommen, dass das Kind div einhüllen würde, wenn seine Größe, sowie seine Geschwister Größe abgestimmt die Eltern die Größe. Aber es sieht aus wie es wird, wenn seine Größe zu 100% die übergeordnete Größe. Ich kann % breiten auf die Kinder, so dass Sie sowohl drinnen bleiben die Eltern, wenn der text umgebrochen wird.

    InformationsquelleAutor Satwik Nadkarny

  2. 0

    Sieht für mich wie die beiden child-divs sind wird richtig gewickelt? Sie sind beide im grauen 150px übergeordneten box.

    BTW dieses kurze tutorial hat mir sehr geholfen mit meinem CSS lernen.

    http://www.barelyfitz.com/screencast/html-training/css/positioning/

    Vielleicht hängt es von Ihrem font-size. Welchen browser verwenden Sie? Ich bin mit chrome und dem grünen Kind erstreckt sich weiter als der graue Eltern.

    InformationsquelleAutor fuzzybabybunny

Schreibe einen Kommentar