国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Gemeinschaft

Lernen

Tools-Bibliothek

KI-Tools

Freizeit

Deutsch

max-content minimale und feste Breite für CSS-Rasterspalten

P粉245003607 2023-09-06 11:26:46

623

Ich habe ein CSS-Raster und m?chte, dass seine Spaltenbreite der Breite des gr??ten Elements in der Spalte oder 100 Pixel entspricht, je nachdem, welcher Wert kleiner ist. Ich dachte, minmax(max-content, 100px) k?nnte funktionieren, aber das funktioniert nicht. Im folgenden Beispiel sollte die schmale Spalte den maximalen Inhalt (aber 100 Pixel) und die breite Spalte 100 Pixel (aber den maximalen Inhalt) haben. Ist das mit CSS Grid m?glich?

.table {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(4, minmax(max-content, 100px));
}

.element {
  background-color: lightblue;
  word-break: break-all;
  white-space: nowrap;
}

<div class="table">
  <div class="element">a</div>
  <div class="element">wiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiide</div>
  <div class="element">narrow</div>
  <div class="element">d</div>
  <div class="element">narrow</div>
  <div class="element">b</div>
  <div class="element">c</div>
  <div class="element">wiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiide</div>
</div>

P粉245003607

Antworte allen(1)

P粉6424362822023-09-07 00:02:09 1 Etage

在項(xiàng)目上使用max-width并保持列自動(dòng)寬度

.table {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(4, auto);
  justify-content: start; /* you need this to avoid the gap between column */
}

.element {
  background-color: lightblue;
  word-break: break-all;
  white-space: nowrap;
  max-width: 100px;
  /* hiding the overflow */  
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="table">
  <div class="element">a</div>
  <div class="element">wiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiide</div>
  <div class="element">narrow</div>
  <div class="element">d</div>
  <div class="element">narrow</div>
  <div class="element">b</div>
  <div class="element">c</div>
  <div class="element">wiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiide</div>
</div>