Ich versuche, ein Container-Div mit einer Breite nur der Größe des Inhalts zu erstellen. Ich habe diesen Teil richtig funktioniert, indem Sie float: left für den Container verwenden. Hier ist, was ich bisher habe.
HTML
%Vor%CSS
%Vor%Das Problem, das ich habe, ist, wenn die Floater divs in den Container gewickelt werden. Ich möchte, dass sie umbrechen, aber ich möchte auch, dass die Breite des Container-Div entsprechend angepasst wird. Zum Beispiel, wenn Ihr Browser 1000px breit ist, funktioniert alles gut und der Container ist 900px. Wenn Sie jedoch den Browser auf eine Breite von etwa 750 Pixel verkleinern, wird der 3. Tauchgang in die nächste Zeile umgebrochen, aber der Container ist 750 Pixel breit; nicht die 600px will ich.
Ist das Verhalten, das ich will, möglich? Wenn ja, wie?
Ich habe eine Fiedel für alle gemacht, um zu sehen, wovon ich rede Hier klicken
Das liegt daran, dass die Breite des Containerelements durch die Breite der Seite oder des enthaltenden Elements bestimmt wird. Das enthaltene Element kann oder kann nicht das HTML-Element sein, abhängig vom Browser. Grundsätzlich haben Sie die .floater Elemente mit einer festen Breite von 300px x 100px (setzen Sie Explicity) und die Breite und Höhe des .container Elements wird implicity gesetzt. Probieren Sie so etwas aus.
%Vor%Dadurch wird die Breite des Containerelements immer kleiner als die des übergeordneten Elements. Wenn also zum Beispiel das enthaltende Element HTML ist, das eine Breite von 1000 px hat, ist die Breite des .halteelements 90% von 1000 px, was 900 px ist. Wenn das html-Element 750px ist, ist das .container-Element 90% von 750px, was 675px ist.
Sie können auch keine Probleme mit Ihrem Code haben, je nachdem, was Sie oberhalb, unterhalb und innerhalb des .container-Elements haben, da Sie Floats nicht gelöscht haben. Versuchen Sie etwas wie dieses
%Vor%Nun, wir hatten das gleiche Problem. Wir haben das jQuery-Maurer-Plugin speziell für unsere Floated-Elemente verwendet.
Dieses Ссылка würde Ihr Problem lösen!
Das Einzige ist, du musst dieses Plugin benutzen. Wenn Sie versuchen, Elemente innerhalb eines Containers zu verschieben, der keine feste Breite hat, schätzen wir, dass Ihr Layout von diesem Plugin sehr profitieren würde.
Sie müssen die Floats löschen, damit der Container umbrochen wird. Entweder ad ...
<div style="clear:both"></div> nach dem letzten Floater oder fügen Sie einen closfix zu Ihnen css wie ...
und die Verwendung des Clearfix von der obigen Seite ändern die Klasse auf dem Container als class="container cf"
Ich habe etwas Ähnliches für eine Bildergalerie von Instagram-Miniaturbildern gemacht, wobei das Bild kleiner als die Größe der Miniaturansicht, aber nicht größer als sein kann, und die Miniaturbilder insgesamt 100% der Breite des Containers einnehmen. Dies ist so, dass die Bilder die gesamte Breite einnehmen, ohne sie auszudehnen.
Sie können diesen Effekt ziemlich mühelos erzielen, wenn Sie einen CSS-Präprozessor verwenden. Wenn Sie keinen CSS-Präprozessor verwenden, wäre mehr Aufwand erforderlich.
Hier ist ein CodePen-Beispiel , das einen Link zu einer anderen Demo enthält.
Im Wesentlichen ist der magische Teil dieses Stylus CSS:
%Vor% Er berechnet die ideale Breite für das Element mit einer maximalen Breite und fügt dann nach Erreichen dieses Limits ein weiteres Element zur Reihe hinzu, was zu einem flüssigen Layout der Elemente führt, in dem die einzelnen Bereiche nicht größer sind als die angegebene maximale Breite (in diesem Fall floaterSize ).
Die ersten generierten sehen so aus:
%Vor% Es ist ein Mobile-First-Ansatz. Im Wesentlichen, wenn Ihr Fenster 299px oder weniger ist, sollten Sie 1 Block sehen, aber wenn es 599px oder weniger ist, wird das 2 Blöcke unterbringen, während 899px 3 Blöcke usw. aufnehmen kann, bis Sie nicht höher gehen wollen in Bildschirmbreite. Der bereitgestellte Stylus würde 10 Medienabfragen schreiben, bis zu @media screen and (min-width: 3000px) .
Das gesamte generierte CSS, das dieser Stylus-Code bietet, ist unten zu sehen.