Wie kann ich ein div dynamisch zu ändern, zum Inhalt und Breite bleibt, die Breite auch, wie die browser-Fenster Größe ändert?

Werfen Sie einen Blick auf diese: (Szenario 1)

#container {
    height:150px;
    border:1px solid pink;
    width:1100px;
}
#widget {
    display:inline-block;
    width:100px;
    height:100px;
    background-color:red;
}​

http://jsfiddle.net/DQFja/1/

Sehr einfach. Ein div mit ein paar anderen divs innerhalb es. Übergeordnete div hat eine Feste Breite von ~1000 Pixel, Kinder divs setzen auf display:inline-block; Wenn Sie das browser-Fenster kleiner als die Eltern, wird eine Bildlaufleiste angezeigt, und Sie können scrollen, um den rest zu sehen.

Nun nehmen Sie einen Blick auf diese: (Szenario 2)

#container {
    height:150px;
    border:1px solid pink;
    float:left;
}
#widget {
    display:inline-block;
    width:100px;
    height:100px;
    background-color:red;
}​

http://jsfiddle.net/zZRq7/

Gleichen Eltern und Kinder, aber die Breite des übergeordneten Elements wird dynamisch bestimmt durch die Anzahl von div-Kinder, die Sie in es. Das ist dandy. Allerdings, wenn Sie das browser-Fenster kleiner, werden die übergeordneten div-Element wird so breit wie das Fenster und die Kinder beginnen, die Verpackung um, so dass das übergeordnete größer (obwohl wir eine Feste Höhe!)

Wie mache ich den Eltern div SOWOHL dynamische als auch in die Breite als in Szenario 2, aber dann auch halten Ihre Form/Höhe/Breite, wenn das browser-Fenster kleiner wird, so können wir eine scrollbar?

InformationsquelleAutor Daniel F. Dietzel | 2012-11-14
  1. 8

    Min-width ist der Weg zu gehen:

    #container {
    height:150px;
    border:1px solid pink;
    min-width:1100px; //set the minimum width of the container to 1100px
    width: 100%; //if the window size is bigger than 1100px, then make the container span the entire window
}

    Sehen Sie ein Beispiel hier.

    Einen hacky-Weg, zu erreichen, ist die Verwendung der white-space - Eigenschaft wie folgt: 

    #container {
    border:1px solid pink;
    white-space: nowrap;
}
#widget {
    display: inline-block;
    width:100px;
    height:100px;
    background-color:red;
}​

    Sehen Sie ein Beispiel hier

    • Ja, ich war ein wenig verwirrt, "dynamisch in der Breite..., sondern auch halten Ihre Form/Höhe/Breite". hoffentlich einer von uns ist, was er suchte 🙂
    • dies funktioniert gut, bis Sie fügen Sie weitere widgets/Kinder in die Eltern. dann haben wir das gleiche problem wieder! was ich brauche, ist eine Feste Breite, die stellt sich automatisch. vielleicht sollte dies in javascript? (zählen Sie die Anzahl der Kinder und stellen Eltern Breite dementsprechend?)
    • Siehe Antwort bearbeitet
    • der hack Antwort FUNKTIONIERT!!! vielen, vielen Dank! Ich würde upvote dies, aber ich habe nicht den Ruf, hahaha.
    InformationsquelleAutor jacktheripper
  2. 2

    Aktualisierung der Antwort zu gehören die white-space line:

    #container {
    height:150px;
    border:1px solid pink;
    white-space:nowrap;
    overflow:auto;
}

    http://jsfiddle.net/DQFja/3/

    • overflow:auto; werden die meisten hier angebracht. Sie wollen nur, um zu sehen, scroll-bars, wenn es einen überlauf 😉
    • Stimmen. aktualisiert overflow:scroll auto
    • das gibt mir eine Bildlaufleiste innerhalb des übergeordneten div-scroll vertikal. was ich will, ist für das browser-Fenster, um mir eine horizontale scroll-Leiste anstatt die Größe des div
    • Wenn das der Fall ist, dann die andere Antwort ist wahrscheinlich das, was du suchst... oder ist es so, dass Sie nicht wollen, dass die min-Breite 1100px Sie nur immer wollen, dass die Breite da ist es bestimmt Kinder die Elemente?
    • Da war nicht die Antwort (overflow:auto) sind Sie suchen, ich aktualisiere mit meinem letzten Versuch.
    • das gibt mir eine Bildlaufleiste in das übergeordnete DIV, anstatt das browser-Fenster. jacktheripper hat es, vielen Dank!
    • OK. Dachte das war der Punkt, lol.

    InformationsquelleAutor MikeSmithDev
Schreibe einen Kommentar