Tworzenie div równych rozmiarów z zawijaniem

17

Próbuję stworzyć system menu z obrazem i tekstem powyżej i poniżej. Dane są dynamiczne. Chcę, aby system menu pojawił się w taki sposób, aby każdy obraz był w równej odległości od siebie, tak aby ustawiał się w siatce obrazów zarówno w poziomie, jak i w pionie.

Problemem jest tekst. Jeśli tekst jest dłuższy niż obraz, div zostaje powiększony. Jednak wówczas tworzy niezręcznie wyglądającą lukę, ponieważ obrazy nie są już w równych odstępach od siebie.

Aby obejść ten problem, myślę, że najlepszym rozwiązaniem byłoby, aby każdy z divów przyjął rozmiar większego diva. Nie jestem jednak pewien, jak to zrobić.

Próbowałem z Flexbox za pomocą flex-wrapwłaściwości. Chociaż ładnie się pakuje, nie udało mi się znaleźć sposobu, aby każdy z obrazów znalazł się w równej odległości od siebie.

Jak mogę to osiągnąć?

Mój kod jest następujący:

#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>
Rozwiń fragment kodu

PS. Nie jestem również pewien, dlaczego moje sekcje div zwiększają swoją wysokość. Doceniony zostanie zatem każdy wgląd w to.

html  css  flexbox 
— kojow7
źródło
2
Myślę, że Grid jest tym, czego szukasz.
— Siraj Alam,
1
Powodem, dla którego przedmioty mają zwiększoną wysokość, align-itemsjest ustawienie stretchdomyślne. Możesz łatwo to zmienić:align-items: flex-start;
— Artur Noetzel
Ci prąd #main szerokość to 450 pikseli. Jeśli twoją dynamiczną treścią dla tej sekcji jest np.; 350px, czy nie wszyscy utworzą nowy rząd? Czy tego chcesz?
— Gosi
@Gosi, tak, właśnie tego chciałbym.
— kojow7
możesz użyć klas bootstrap 4. Próbowałeś?
— Revti Shah,

Odpowiedzi:

6

Nie jestem pewien, czy możesz to zrobić, aby każdy element stał się tak duży, jak największy element, ale jeśli możesz założyć, że chcesz określoną liczbę elementów w każdym rzędzie, po prostu ułóż je równej wielkości. Myślę, że o wiele łatwiej to zrobić za pomocą siatki css zamiast flexboksa. Zobacz rozwiązanie poniżej. Używam siatki do pozycjonowania elementów przekroju , a także dla upewnienia się, że wewnątrz każdej sekcji wszystkie trzy części (górny tekst, obraz, dolny tekst) zajmują dokładnie 1/3 części div - w celu zapewnienia, że ​​wszystkie obrazy również wyrównują się w pionie . Ponadto używam flex w etykietach, aby upewnić się, że teksty są na środku (poziomo i pionowo).

#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>
Rozwiń fragment kodu

— Jakub Rusilko
źródło
To nie zadziała, ponieważ elementy mają stały rozmiar. Przykład: jeśli wstawię Etykietę 1AAAAAAAAAAAAAAAAAAAAAAAAA, wówczas rozmiar elementu nie zmieni się w celu dopasowania do tekstu.
— kojow7
hej to zadziała. Zaktualizuję jego kod. Proszę sprawdź to.
— Revti Shah,
@ kojow7 możesz umieścić długą nazwę w etykiecie. Mam nadzieję, że spełnimy twoją odpowiedź.
— Revti Shah,
3

Daj temu kodepenowi szybki obrót. Brakuje tylko zapytania medialnego o to, jak się zachować, gdy nie można dopasować 3 kolumn w rzędzie, dla których wszystko, co chciałbym zmienić, to max-widthwłaściwość, którą należy 50% - individual item padding left and right - how much space you want betweenzmienić i zmienić flex: 1 33%naflex: 1 55%

(Można pominąć wartość dopełnienia jeśli zmienić sposób pudełko wielkości dzieła tak, że szerokość obejmuje dopełnienie w jego szerokości z własności skrzynkowej wielkości jak ten )

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.
źródło
Chyba chciałbym, żeby to pasowało jak najwięcej elementów z rzędu, jak to możliwe. Może to nie być łatwe do wykonania w przypadku zapytań o media, ponieważ należy to zrobić dla każdego możliwego rozmiaru ekranu z każdym możliwym rozmiarem div.
— kojow7
3

Mam nadzieję, że to pomoże.

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>
Rozwiń fragment kodu

#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
źródło
zobacz tylko fragment kodu, fragment kodu poniżej nie jest aktualizowany
— Fahim Khan
@ kojow7 widzisz moją odpowiedź?
— Fahim Khan,
@Revti Shah Jeśli etykieta drugiego pudełka ma długą nazwę, będzie wyglądać jak pierwsze pudełko
— Fahim Khan
zapytaj go o wyraźne zdjęcie, czego chce. Ponieważ ona / on nie chce 100% szerokości pudełek.
— Revti Shah,
0

Możesz spróbować dodać szerokość i podział na słowa do kontenera etykiet i odpowiednio dostosować szerokość 

#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>
Rozwiń fragment kodu

— lost_in_magento
źródło
Złamanie słowa na pół jest niedopuszczalne. Zamiast tego chcę, aby inne div zyskały taki sam rozmiar jak większe div.
— kojow7
Pewnie! Czy możemy to zrobić za pomocą javascript?
— lost_in_magento
Wolałbym czysty CSS, ale jeśli nie jest to możliwe, JavaScript (nie jQuery) byłby akceptowalny.
— kojow7
To najlepsza odpowiedź bez javascript
— David Machado,
0

Jeśli dobrze rozumiem twój problem, dziwną luką, której chcesz się pozbyć, jest ta w drugim rzędzie, gdy pierwszy rząd się zawija. Jeśli to wszystko starasz się rozwiązać, to może wszystko, co trzeba zrobić, to zmiana justify-contentod space-betweendo flex-startz marginesem dodany do .sectionelementów i wyściółka w swoim #maindopasować do. Odstępy między wszystkimi obrazami będą teraz wynosić 20 pikseli.

#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>
Rozwiń fragment kodu

Jeśli nie podoba ci się sposób, który wygląda, można spróbować innych justify-contentwartości jak flex-start, flex-end, space-around, space-evenly.

Możesz też pozbyć się każdego z nich justify-contenti użyć flex-growgo, .sectionaby dopasować każdy do otoczenia.

#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>
Rozwiń fragment kodu

Alternatywnie, jeśli chcesz, aby ich rynny ustawiły się w linii, a jednocześnie rozwijały się w celu dopasowania do .sectionzawartości każdego elementu, możesz spróbować użyć display: tablezamiast tego.

Wadą jest to, że musisz podzielić HTML na wiersze.

#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>
Rozwiń fragment kodu

Jeśli zamiast tego naprawdę chcesz, aby wszystkie .sectionelementy były równe największemu .sectionelementowi,

najprawdopodobniej będziesz musiał użyć JavaScript, ponieważ elementy rodzeństwa w CSS niewiele o sobie wiedzą.

Możesz dodać następujący kod JavaScript do swojej strony i dostosować CSS jako taki:

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>
Rozwiń fragment kodu

— jsea
źródło
Tak, właśnie tego szukam. Jedynym problemem jest to, że prawy margines jest zbyt duży. Byłoby miło, gdyby między wszystkimi obiektami i lewym / prawym marginesem były równe odległości.
— kojow7
Czy możesz sprawdzić moją odpowiedź @ kojow7
— David Machado
0

Sugerowałbym również CSS Grid.

Podajesz 3 kolumny i 2 wiersze, które dzielą szerokość równomiernie między sobą, i mówisz sekcjom, że mają mały margines, aby pokazywać przerwy między nimi:

.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>
Rozwiń fragment kodu

— Kai Hartmann
źródło
Problem polega jednak na tym, że sekcje są dynamiczne, możesz zmieścić mniej lub więcej w jednym rzędzie, więc ustawienie go na 3 kolumny i 2 wiersze nie będzie działać.
— kojow7
0

Rozwiązanie czysto CSS spełniające wszystkie te kryteria jest, moim zdaniem, niemożliwe, ale rozwiązanie JS w połączeniu z CSS Grid jest możliwe.

Czyste rozwiązanie CSS, w którym element dynamicznie dostosowuje się do tekstu i ustawia zmiany na wszystkie inne elementy, nie jest możliwe. Możemy dynamicznie ustawić szerokość elementu, aby dostosować się do tekstu, ale nie możemy ustawić tej szerokości jako minimalnej dla wszystkich innych elementów, które mają tę samą klasę.

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>
Rozwiń fragment kodu

— David Machado
źródło
Dziękuję za tę odpowiedź. Wydaje się być jak najbliżej tego, czego potrzebuję (zakładając, że nie ma czystego rozwiązania CSS). Ponadto nie zdawałem sobie sprawy, że zmienne Właściwości niestandardowe / CSS faktycznie istnieją. Czy są one niezbędne do prawidłowego działania, czy użyłeś ich dla wygody?
— kojow7
@ kojow7 Lubię ich używać, ponieważ sprawiają, że kod jest bardziej znaczący i pasują do tego konkretnego przypadku jak rękawiczki
— David Machado
Hej, próbuję sprawić, by działało to bez rozbierania wysokości div, aby wypełnić rodzica. Jakieś sugestie? Każdy obraz powinien być nadal wyrównany względem siebie zarówno w poziomie, jak i w pionie. Odstępy w poziomie mogą się zmieniać między rzędami, ale odstępy między kolumnami powinny być takie same w każdym rzędzie.
— kojow7
1
@ kojow7, po prostu utwórz siatkę w środku divi pozwól, aby wypełnienia, granice. a min-widthi min-heightw głównym div.
— ElChiniNet
@ kojow7 dokładnie to, co powiedział ElChiniNet, właśnie zaktualizowało css i js, aby uzyskać pożądany wynik.
— David Machado
0

To jest to: 

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

sprawdź https://jsfiddle.net/sugandhnikhil/b216mx5d/

zmień rozmiar okna, aby zobaczyć ekwipunek między obrazem !!!!

Dzięki tona !!!!!!!

:-)

— nikhil sugandh
źródło
0

Zastanawia mnie tylko, dlaczego długość tekstu określa wielkość pliku div? Czy to nie spowodowałoby, że interfejs byłby dziwny? Sugeruję ustawienie szerokości etykiety i całego przelewu tekstu ellipsis (...). Dzięki temu nie potrzebujesz JavaScriptkodów, a tylko niektóre dodatkowe cssdla twojego .label. Oto fragment. To wyglądałoby o wiele lepiej niż divzmiana rozmiarów, gdy pojawi się długi tekst. 

#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>
Rozwiń fragment kodu

Jeśli martwisz się, „jak moi widzowie mogą przeczytać resztę tekstu?” wtedy możesz po prostu zastosować niektóre efekty on hoverdo swojej próbkiellipsis kodepen (próbka nie moja) lub może spróbować czegoś takiego jak to rozwiązanie SO .

Mam nadzieję że to pomoże!

— tomjosef
źródło
0

Jest to nieco inny kąt niż sugerują inne odpowiedzi. Możesz rozważyć obcięcie tekstu.

#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>
Rozwiń fragment kodu

— timur
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.