Erstellen von Divs gleicher Größe mit Wrap-Around

17

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>
Erweitern Sie das Snippet

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.

html  css  flexbox 
— kojow7
quelle
2
Ich denke, Grid ist das, wonach Sie suchen.
— Siraj Alam
1
Der Grund, warum die Elemente eine erhöhte Höhe erhalten, align-itemsist die stretchstandardmäßig festgelegte. Sie können das leicht ändern:align-items: flex-start;
— Artur Noetzel
Ihre aktuelle # Hauptbreite beträgt 450px. Wenn Ihr dynamischer Inhalt für Ihren Abschnitt z. 350px, würden sie nicht alle eine neue Reihe bilden? Ist es das was du willst?
— Gosi
@ Gosi, ja, das würde ich mir wünschen.
— Kojow7
Sie können Bootstrap 4-Klassen verwenden. Hast du versucht?
— Revti Shah

Antworten:

6

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).

#outer {
}
#main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
	border: solid black 25px;
	border-radius: 25px;
	width: 450px;
	height: 500px;
	padding: 20px;
}
.section {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 1fr 1fr 1fr;
	background-color: #ddd;
	padding: 5px;
  margin: 5px;
  min-width: 80px;
  vertical-align: center;
}

.label, .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  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>
Erweitern Sie das Snippet

— Jakub Rusilko
quelle
Dies funktioniert nicht, da die Größe der Elemente festgelegt ist. Beispiel: Wenn ich Label 1AAAAAAAAAAAAAAAAAAAAAAAAAAA eingefügt habe, wird die Größe des Elements nicht an den Text angepasst.
— Kojow7
Hey, es wird funktionieren. Ich werde seinen Code aktualisieren. Überprüfen Sie bitte das.
— Revti Shah
@ kojow7 Sie können lange Namen in Etikett setzen. Ich hoffe, wir erfüllen Ihre Antwort.
— Revti Shah
3

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 ändern flex: 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

<div class="container">
    <div class="item">
            <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 class="item">
            <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 class="item">
            <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 class="item">
            <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 class="item">
            <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 class="item">
            <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>

CSS :

.container {
    display: flex;
    flex-flow: row wrap;

    width: 100%;
    justify-content: space-between;
}

.item {

    min-height: 200px;
    background: coral;
    border: 1px solid black;


    flex: 1 33%;
    max-width: calc(33% - 20px - (15px * 2) / 3);
    min-width: 200px;
    margin-bottom: 15px;

    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;

    padding: 10px;

}
— Mike N.
quelle
Ich denke, ich möchte, dass dies so viele Elemente wie möglich in eine Reihe passt. Dies ist bei Medienabfragen möglicherweise nicht einfach, da Sie dies für jede mögliche Bildschirmgröße mit jeder möglichen Größe von div tun müssten.
— kojow7
3

Ich hoffe das wird helfen.

CSS

#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: 10px;
	flex-grow: 1;
  box-sizing: border-box;
  min-width: 50%;
}
.innerSection{
	background-color: #ddd;
	padding: 15px;
}

.label, .icon {
	text-align: center;
}
<div id="outer">
        <div id="main">
          <div class="section">
            <div class="innerSection">
              <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>
          <div class="section">
            <div class="innerSection">
              <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>
          <div class="section">
            <div class="innerSection">
              <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>
          <div class="section">
            <div class="innerSection">
              <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>
          <div class="section">
            <div class="innerSection">
              <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> 
      </div>
Erweitern Sie das Snippet

#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: 10px;
min-width:50%;
box-sizing: border-box;
}
.innerSection{
background-color: #ddd;
padding: 15px;
}

.label, .icon {
text-align: center;
}

HTML

<div id="outer">
    <div id="main">
      <div class="section">
        <div class="innerSection">
          <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>
      <div class="section">
        <div class="innerSection">
          <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>
      <div class="section">
        <div class="innerSection">
          <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>
      <div class="section">
        <div class="innerSection">
          <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>
      <div class="section">
        <div class="innerSection">
          <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> 
  </div>
— Fahim Khan
quelle
siehe nur den Snippet-Code, der Snippet unter Code wird nicht aktualisiert
— Fahim Khan
@ kojow7 siehst du meine Antwort?
— Fahim Khan
@ Revti Shah Wenn das zweite Box-Label einen langen Namen hat, sieht es aus wie das erste Box
— Fahim Khan
Lassen Sie ihn / sie nach einem klaren Bild fragen, was sie will. Weil sie / er nicht 100% Breite der Kisten will.
— Revti Shah
0

Sie können versuchen, dem Etikettencontainer Breite und Wortumbruch hinzuzufügen und die Breite entsprechend anzupassen 

#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 {
    width: 100px;
    height: 100px;
    overflow-y: auto;
    word-break: break-all;
    margin-bottom: 10px;
}

.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>
Erweitern Sie das Snippet

— lost_in_magento
quelle
Das Wort in zwei Hälften zu teilen ist nicht akzeptabel. Stattdessen möchte ich, dass die anderen Divs die gleiche Größe wie die größeren Divs erhalten.
— Kojow7
Sicher! Können wir Javascript verwenden, um dies zu erreichen?
— lost_in_magento
Ich würde reines CSS bevorzugen, aber wenn nicht möglich, wäre JavaScript (nicht jQuery) akzeptabel.
— Kojow7
Dies ist die beste Antwort ohne Javascript
— David Machado
0

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-contentvon space-betweenzu ändern, indem Sie flex-startIhren .sectionElementen einen Rand hinzufügen und die Polsterung entsprechend #mainanpassen. Der Abstand zwischen allen Bildern beträgt jetzt 20 Pixel.

#outer {
	display: flex;
}
#main {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	border: solid black 25px;
	border-radius: 25px;
	width: 450px;
	height: 500px;
	padding: 10px;
}
.section {
	background-color: #ddd;
	padding: 15px;
	margin: 10px;
}

.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>
Erweitern Sie das Snippet

Wenn Sie nicht wie wie das aussieht, können Sie andere versuchen , justify-contentWerte wie flex-start, flex-end, space-around, space-evenly.

Alternativ können Sie sie entfernen justify-contentund verwenden flex-grow, um sie .sectionan ihre Umgebung anzupassen.

#outer {
  display: flex;
}
#main {
  display: flex;
  flex-wrap: wrap;
  border: solid black 25px;
  border-radius: 25px;
  width: 450px;
  height: 500px;
  padding: 10px;
}
.section {
  background-color: #ddd;
  padding: 15px;
  margin: 10px;
  flex-grow: 1;
}

.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>
Erweitern Sie das Snippet

Alternativ .sectionkönnen Sie versuchen, die Rinnen auszurichten, während sie sich noch erweitern, um sie an den Inhalt der einzelnen Elemente anzupassendisplay: table stattdessen verwenden.

Der Nachteil hierbei ist, dass Sie den HTML-Code in Zeilen aufteilen müssen.

#outer {
  display: flex;
}
#main {
  display: table;
  flex-wrap: wrap;
  border: solid black 25px;
  border-radius: 25px;
  width: 450px;
  height: 500px;
  border-collapse: separate;
  border-spacing: 20px;
}
.row {
  display: table-row;
}
.section {
  display: table-cell;
  background-color: #ddd;
  padding: 15px;
}

.label, .icon {
  text-align: center;
}
<div id="outer">
  <div id="main">
    <div class="row">
      <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>
    <div class="row">
      <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> 
</div>
Erweitern Sie das Snippet

Wenn Sie stattdessen wirklich möchten, dass alle .sectionElemente so erweitert werden, dass sie mit den größten gleich sind.section Element 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:

function expandSectionsToLargest() {
  // Grab all of the elements with "section" class names
  var sectionElements = document.getElementsByClassName('section');

  // Find the largest width among our section elements
  var largestWidth = -Infinity;
  Array.prototype.forEach.call(sectionElements, section => {
    if (section.offsetWidth > largestWidth) {
      largestWidth = section.offsetWidth;
    }
  });

  // Set all of the sections to at least equal the largest width
  Array.prototype.forEach.call(sectionElements, section => {
    section.style.minWidth = largestWidth + 'px';
  });
}

// Expand the section widths now (must be called after the section elements are loaded)
expandSectionsToLargest();
#outer {
	display: block;
}
#main {
	display: block;
	border: solid black 25px;
	border-radius: 25px;
	width: 450px;
	height: 500px;
	padding: 10px;
}
.section {
	background-color: #ddd;
	box-sizing: border-box; /* Important to make the element's CSS width coincide with JavaScript's offsetWidth value */
	padding: 15px;
	margin: 10px;
	float: left;
}

.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>
Erweitern Sie das Snippet

— jsea
quelle
Ja, das allerletzte ist das, wonach ich suche. Das einzige Problem dabei ist, dass der rechte Rand zu groß ist. Es wäre schön, wenn zwischen allen Objekten und dem linken / rechten Rand ein gleichmäßiger Abstand bestehen würde.
— kojow7
Kannst du meine Antwort @ kojow7 überprüfen?
— David Machado
0

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:

.section {
      background-color: #ddd;
      padding: 15px;
      margin: 10px;
  }

  .label, .icon {
      text-align: center;
  }

  #main {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
  }
<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>
Erweitern Sie das Snippet

— Kai Hartmann
quelle
Das Problem ist jedoch, dass die Abschnitte dynamisch sind. Möglicherweise können Sie weniger oder mehr in eine Zeile einpassen, sodass das Festlegen auf 3 Spalten und 2 Zeilen nicht funktioniert.
— Kojow7
0

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.

let textClass = document.getElementsByClassName("text");
let texts = Array.from(textClass);

var widths = [];

texts.forEach(function(item){
  widths.push(item.offsetWidth)
});

let maxWidth = Math.max.apply(Math, widths) + 20; // change the 20 to adjust padding

let root = document.documentElement;
root.style.setProperty('--card-min-width', maxWidth + "px");
:root {
  --card-min-width: 0px;
}

#outer {
	min-width: 350px; /*this just needs a minimal value*/
	min-height: 200px; /*this just needs a minimal value*/
}

#main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width), 1fr));
  grid-template-rows: auto;
  grid-gap: 0.5rem; /*padding between elements*/
	padding: 0.5rem; /*outer padding*/
  /*
  border: solid black 25px;
	border-radius: 25px;        <--- black border
  */
}

.section {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 1fr 1fr 1fr;
	background-color: #ddd;
	padding: 5px;
  margin: 5px;
  min-width: 80px;
  vertical-align: center;
}

.label, .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  text-align: center;
}
<div id="outer">
	<div id="main">
		<div class="section">
			<div class="label">
        <p class="text">
          Label 1AAAAAAAAAAAdsadasdasd
        </p>
      </div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">
        <p class="text">
          Label 1B
        </p>
      </div>
		</div>
		<div class="section">
			<div id="x" class="label">
        <p class="text">
          Label 2A
        </p>
      </div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">
        <p class="text">
          Label 2B
        </p>
      </div>
		</div>
		<div class="section">
			<div class="label">
        <p class="text">
          Label 3A
        </p>
      </div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">
        <p class="text">
          Label 3B
        </p>
      </div>
		</div>
		<div class="section">
			<div class="label">
        <p class="text">
          Label 4A
        </p>
      </div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">
        <p class="text">
          Label 4B
        </p>
      </div>
		</div>
		<div class="section">
			<div class="label">
        <p class="text">
          Label 5A
        </p>
      </div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">
        <p class="text">
          Label 5B
        </p>
      </div>
		</div>
	</div> 
</div>
Erweitern Sie das Snippet

— David Machado
quelle
Danke für diese Antwort. Es scheint soweit am nächsten zu sein, was ich brauche (vorausgesetzt, es gibt keine reine CSS-Lösung). Außerdem wurde mir nicht klar, dass benutzerdefinierte Eigenschaften / CSS-Variablen tatsächlich vorhanden sind. Sind sie notwendig, damit dies richtig funktioniert, oder haben Sie sie nur aus Bequemlichkeitsgründen verwendet?
— Kojow7
@ kojow7 Ich benutze sie gerne, weil sie den Code aussagekräftiger machen und sie passen wie angegossen in diesen speziellen Fall
— David Machado
Hey, ich versuche das zum Laufen zu bringen, ohne dass sich die Divs in der Höhe dehnen, um die Eltern zu füllen. Irgendwelche Vorschläge? Jedes Bild sollte weiterhin horizontal und vertikal zueinander ausgerichtet sein. Der horizontale Abstand zwischen den Zeilen kann sich ändern, der Abstand zwischen den Spalten sollte jedoch in jeder Zeile gleich sein.
— Kojow7
1
@ kojow7, erstelle einfach das Gitter in einem Inneren divund lass die Polster, die Ränder. und das min-widthund min-heightin der Hauptsache div.
— ElChiniNet
@ kojow7 genau das, was ElChiniNet gesagt hat, hat gerade die CSS und JS aktualisiert, um die gewünschte Ausgabe zu haben.
— David Machado
0

Das ist es: 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Title</title>
    <style>
        .firstone {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            word-wrap: break-word;
            justify-content: space-evenly;
        }

        .secondone {
            word-wrap: break-word;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }
    </style>
</head>

<body>

    <div class="firstone">
        <div>
            <div>Label 1AAAAAAAAAAA</div>
            <div><img src="https://via.placeholder.com/75"></div>
            <div>Label 1B</div>
        </div>
        <div>
            <div>Label 2A</div>
            <div><img src="https://via.placeholder.com/75"></div>
            <div>Label 2B</div>
        </div>
    </div>
    <div class="secondone">
        <div>
            <div>Label 3A</div>
            <div><img src="https://via.placeholder.com/75"></div>
            <div>Label 3B</div>
        </div>
        <div>
            <div>Label 4A</div>
            <div><img src="https://via.placeholder.com/75"></div>
            <div>Label 4B</div>
        </div>
        <div>
            <div>Label 5A</div>
            <div><img src=" https://via.placeholder.com/75"> </div>
            <div>Label 5B</div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

</html>

Ü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!!!!!!!

:-)

— Nikil Sugandh
quelle
0

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 festzulegen ellipsis (...). Damit sind keine JavaScriptCodes erforderlich , nur einige zusätzliche cssfür Sie .label. Hier ist ein Ausschnitt. Dies würde so viel besser aussehen, als wenn sich Ihre divGröße ändern würde, wenn ein langer Text angezeigt wird. 

#outer {
	display: block;
}
#main {
	display: block;
	border: solid black 25px;
	border-radius: 25px;
	width: 450px;
	height: 500px;
	padding: 10px;
}
.section {
	background-color: #ddd;
	box-sizing: border-box; /* Important to make the element's CSS width coincide with JavaScript's offsetWidth value */
	padding: 15px;
	margin: 10px;
	float: left;
}

.label, .icon {
	text-align: center;
}

.label{
  width: 100px;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<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 2ASDEASD</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 3AGDSADASD</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 5ASDSAD</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 5B</div>
		</div>
    <div class="section">
			<div class="label">Label 6BABAF</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 5B</div>
		</div>
    <div class="section">
			<div class="label">Label 5XAEAFSASFD</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 5B</div>
		</div>
    <div class="section">
			<div class="label">Label 5AASDASEFSAFGG</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 5B</div>
		</div>
    <div class="section">
			<div class="label">Label 5ASDASEEGEDSDSD</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 5B</div>
		</div>
	</div> 
</div>
</body>
</html>
Erweitern Sie das Snippet

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 Beispiel ellipsiswie dieses Codepen- Beispiel anwenden (Beispiel nicht meins) oder vielleicht etwas wie diese SO- Lösung ausprobieren .

Hoffe das hilft!

— Tomjosef
quelle
0

Dies ist ein etwas anderer Winkel als in anderen Antworten vorgeschlagen. Möglicherweise möchten Sie Text abschneiden.

#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;
    width: 100px; // I had to come up with a number here
    min-width: 0; 
}

.label, .icon {
	text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; // truncate the excess string here
}
<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>
Erweitern Sie das Snippet

— timur
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.