Ich versuche ein Menüsystem mit einem Bild und Text oben und unten zu erstellen. Die Daten sind dynamisch. Ich möchte, dass das Menüsystem so angezeigt wird, dass jedes Bild den gleichen Abstand voneinander hat, sodass es horizontal und vertikal in einem Raster von Bildern ausgerichtet ist.
Das Problem ist der Text. Wenn der Text länger als das Bild ist, wird das Div vergrößert. Dann entsteht jedoch eine unangenehme Lücke, da die Bilder nicht mehr gleich weit voneinander entfernt sind.
Um dies zu umgehen, denke ich, wäre der beste Ansatz, wenn jeder der anderen Divs die Größe des größeren Divs übernimmt. Ich bin mir jedoch nicht sicher, wie ich das machen soll.
Ich habe mit Flexbox versucht, die flex-wrapEigenschaft zu nutzen. Während es gut verpackt ist, konnte ich keinen Weg finden, jedes der Bilder in gleichem Abstand voneinander auszurichten.
Wie gehe ich vor, um dies zu erreichen?
Mein Code lautet wie folgt:
#outer {
display: flex;
}
#main {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
border: solid black 25px;
border-radius: 25px;
width: 450px;
height: 500px;
padding: 20px;
}
.section {
background-color: #ddd;
padding: 15px;
}
.label, .icon {
text-align: center;
}<div id="outer">
<div id="main">
<div class="section">
<div class="label">Label 1AAAAAAAAAAA</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 1B</div>
</div>
<div class="section">
<div class="label">Label 2A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 2B</div>
</div>
<div class="section">
<div class="label">Label 3A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 3B</div>
</div>
<div class="section">
<div class="label">Label 4A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 4B</div>
</div>
<div class="section">
<div class="label">Label 5A</div>
<div class="icon"><img src="https://via.placeholder.com/75"></div>
<div class="label">Label 5B</div>
</div>
</div>
</div>PS. Ich bin mir auch nicht sicher, warum meine Abschnittsdivs ihre Höhe erhöhen. Ein Einblick in diese Frage wäre also ebenfalls willkommen.
align-itemsist diestretchstandardmäßig festgelegte. Sie können das leicht ändern:align-items: flex-start;Antworten:
Sie sind sich nicht sicher, ob Sie es so machen können, dass jedes Element so groß wird wie das größte Element, aber wenn Sie davon ausgehen können, dass Sie eine bestimmte Anzahl von Elementen in jeder Zeile möchten, machen Sie sie einfach gleich groß. Ich denke, dass dies mit einem CSS-Raster anstelle einer Flexbox viel einfacher ist. Siehe die Lösung unten. Ich verwende ein Raster, um die Abschnittselemente zu positionieren und um sicherzustellen, dass in jedem Abschnitt alle drei Teile (oberer Text, Bild, unterer Text) genau 1/3 des Divs einnehmen - dies soll sicherstellen, dass alle Bilder auch vertikal ausgerichtet sind . Außerdem verwende ich Flex in Labels , um sicherzustellen, dass sich die Texte in der Mitte befinden (horizontal und vertikal).
quelle
Probieren Sie diesen schnellen Codepen aus. Eine Sache fehlt , ist Medienabfrage für wie sie sich verhalten , wenn es nicht mehr als 3 Spalten in einer Zeile passen , für die alles , was ich ändern würde , ist die
max-widthEigenschaft zu sein ,50% - individual item padding left and right - how much space you want betweenund ändernflex: 1 33%zuflex: 1 55%(Sie können den Auffüllwert überspringen, wenn Sie die Funktionsweise Ihrer Boxgröße ändern, sodass die Breite das Auffüllen in der Breite mit der Eigenschaft "Boxgröße" wie dieser einschließt. )
https://codepen.io/mihaelnikic/pen/bGGPBYG
CSS :
quelle
Ich hoffe das wird helfen.
CSS
HTML
quelle
Sie können versuchen, dem Etikettencontainer Breite und Wortumbruch hinzuzufügen und die Breite entsprechend anzupassen
quelle
Wenn ich Ihr Problem richtig verstehe, ist die seltsame Lücke, die Sie beseitigen möchten, die in der zweiten Reihe, sobald Ihre erste Reihe abgeschlossen ist. Wenn das alles ist, was Sie zu lösen versuchen, müssen Sie möglicherweise nur
justify-contentvonspace-betweenzu ändern, indem Sieflex-startIhren.sectionElementen einen Rand hinzufügen und die Polsterung entsprechend#mainanpassen. Der Abstand zwischen allen Bildern beträgt jetzt 20 Pixel.Wenn Sie nicht wie wie das aussieht, können Sie andere versuchen ,
justify-contentWerte wieflex-start,flex-end,space-around,space-evenly.Alternativ können Sie sie entfernen
justify-contentund verwendenflex-grow, um sie.sectionan ihre Umgebung anzupassen.Alternativ
.sectionkönnen Sie versuchen, die Rinnen auszurichten, während sie sich noch erweitern, um sie an den Inhalt der einzelnen Elemente anzupassendisplay: tablestattdessen verwenden.Der Nachteil hierbei ist, dass Sie den HTML-Code in Zeilen aufteilen müssen.
Wenn Sie stattdessen wirklich möchten, dass alle
.sectionElemente so erweitert werden, dass sie mit den größten gleich sind.sectionElement entsprechen,Sie müssen höchstwahrscheinlich JavaScript verwenden, da Geschwisterelemente in CSS nicht viel voneinander wissen.
Sie können Ihrer Seite das folgende JavaScript hinzufügen und das CSS als solches anpassen:
quelle
Ich würde auch CSS Grid vorschlagen.
Sie geben 3 Spalten und 2 Zeilen an, die die Breite gleichmäßig teilen, und weisen die Abschnitte an, einen kleinen Rand zu haben, um Lücken dazwischen anzuzeigen:
quelle
Eine reine CSS-Lösung mit all diesen Kriterien ist meines Erachtens unmöglich, aber eine JS-Lösung in Kombination mit CSS Grid ist möglich.
Eine reine CSS-Lösung, bei der sich das Element dynamisch an den Text anpasst und festlegt, dass sich alle anderen Elemente ändern, ist nicht möglich. Wir können die Breite des Elements dynamisch festlegen, um es an Text anzupassen, aber wir können diese Breite nicht auf alle anderen Elemente mit derselben Klasse beschränken.
quelle
divund lass die Polster, die Ränder. und dasmin-widthundmin-heightin der Hauptsachediv.Das ist es:
Überprüfen Sie https://jsfiddle.net/sugandhnikhil/b216mx5d/
Ändern Sie die Größe des Fensters, um zu sehen, ob zwischen den Bildern die gleichen Werte liegen !!!!
Danke vielmals!!!!!!!
:-)
quelle
Ich frage mich nur, warum die Länge des Textes die Größe des Textes definieren soll
div. Würde das die Benutzeroberfläche nicht komisch machen? Ich würde vorschlagen, die Breite für das Etikett und den gesamten Textüberlauf festzulegenellipsis (...). Damit sind keineJavaScriptCodes erforderlich , nur einige zusätzlichecssfür Sie.label. Hier ist ein Ausschnitt. Dies würde so viel besser aussehen, als wenn sich IhredivGröße ändern würde, wenn ein langer Text angezeigt wird.Wenn Sie sich Sorgen machen über "Wie können meine Zuschauer den Rest des Textes lesen?" Dann können Sie einfach einige Effekte
on hoverauf Ihr Beispielellipsiswie dieses Codepen- Beispiel anwenden (Beispiel nicht meins) oder vielleicht etwas wie diese SO- Lösung ausprobieren .Hoffe das hilft!
quelle
Dies ist ein etwas anderer Winkel als in anderen Antworten vorgeschlagen. Möglicherweise möchten Sie Text abschneiden.
quelle