Установите высоту строки, чтобы соответствовать самой высокой ячейке в строке в сетке CSS - PullRequest
Новая
       4

Установите высоту строки, чтобы соответствовать самой высокой ячейке в строке в сетке CSS

1 голос
/ 15 января 2020

У меня есть сетка с 5 столбцами и 4 рядами. Я бы хотел, чтобы высота каждой ячейки была одинаковой в каждом ряду. Другими словами, высота каждой строки должна быть равна самой высокой ячейке в этой строке.

К сожалению, я могу получить только общее количество ячеек одинаковой высоты. Единственный подход, который я получил, был гибким и установленным в DIV style = "order: {order number}", но этот подход не хорош, потому что невозможно сделать адаптивный веб-дизайн и усложнить рендеринг страницы с помощью php.

Итак, Я не могу изменить порядок HTML элементов DIV из-за адаптивного веб-дизайна.

Любая помощь в CSS будет принята с благодарностью. Спасибо 

body {
    background-color: #ededed;  
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #c2b9b4;
    text-align: center;
}

.grid-container {
  margin:auto;
  width:990px;
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* or simply "1fr 1fr;" */
  grid-template-rows: 1fr;
  grid-row-gap: 0px; 
  grid-column-gap: 5px;
}

.object {background:white;border:2px #d6d6d5 solid;}
.object:hover {border:2px green solid;}


.object:hover .product_name {background:#001973}
.potencia {background:white;color:#000;text-align:center;line-height:200%;
        border-bottom:1px #d6d6d5 solid;
        
		height:auto;
    }

.potencia strong:before {content: "\f00c";font-family: FontAwesome;color:#059f47;font-size:18px}
.potencia span:before {content: "\f00d";font-family: FontAwesome;font-size:18px;color:#1e88d4;}
<div class="grid-container">
<div class="object top_object">
	<div style="background:#e5f5e5;" class="potencia">Display</div>
	<div style="background:#f5f4f4;" class="potencia">Luminosità immagine</div>
	<div class="potencia">Le pile/batterie sono incluse?</div>
	<div style="background:#f5f4f4;" class="potencia">Max. risoluzione schermo</div>
</div>

<div class="object object1">
	<div class="potencia">LCD</div>
	<div style="background:#f5f4f4;"class="potencia">1200</div>
	<div style="background:#f5f4f4;"class="potencia"><span></span></div>
	<div class="potencia">1920_x_1080</div>
</div>

<div class="object object2">
	<div class="potencia">LCD</div>
	<div style="background:#f5f4f4;"class="potencia">2800</div>
	<div style="background:#f5f4f4;"class="potencia"><span></span></div>
	<div class="potencia">I'm the highest cell in this row, but left and right cells are smaller.</div>
</div>

<div class="object object3">
	<div class="potencia">LED, LCD</div>
	<div style="background:#f5f4f4;"class="potencia">3500 lm</div>
	<div style="background:#f5f4f4;"class="potencia"><span></span></div>
	<div class="potencia">1080p Full HD</div>
</div>

<div class="object object4">
	<div class="potencia">LED</div>
	<div style="background:#f5f4f4;"class="potencia">2800</div>
	<div style="background:#f5f4f4;"class="potencia"><span></span></div>
	<div class="potencia">1920_x_1080</div>
</div>
</div>

1 Ответ

0 голосов
/ 15 января 2020

Я не совсем понимаю вашу проблему. Если вы просто хотите, чтобы последняя ячейка соответствовала оставшейся доступной высоте, вы можете использовать flex.

Или вы хотите, чтобы каждая ячейка имела такую ​​же высоту, что и ячейка с текстом I'm the highest cell in this row, but left and right cells are smaller. в ней? 

body {
    background-color: #ededed;  
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #c2b9b4;
    text-align: center;
}

.grid-container {
  margin:auto;
  width:990px;
  height:320px;
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* or simply "1fr 1fr;" */
  grid-template-rows: 1fr;
  grid-row-gap: 0px; 
  grid-column-gap: 5px;
}

.object {background:white;border:2px #d6d6d5 solid;}
.object:hover {border:2px green solid;}

.potencia {
    height: 25%;
}

.object:hover .product_name {background:#001973}
.potencia {background:white;color:#000;text-align:center;line-height:200%;
        border-bottom:1px #d6d6d5 solid;
    }

.potencia strong:before {content: "\f00c";font-family: FontAwesome;color:#059f47;font-size:18px}
.potencia span:before {content: "\f00d";font-family: FontAwesome;font-size:18px;color:#1e88d4;}
<div class="grid-container">
<div class="object top_object">
	<div style="background:#e5f5e5;" class="potencia">Display</div>
	<div style="background:#f5f4f4;" class="potencia">Luminosità immagine</div>
	<div class="potencia">Le pile/batterie sono incluse?</div>
	<div style="background:#f5f4f4;" class="potencia">Max. risoluzione schermo</div>
</div>

<div class="object object1">
	<div class="potencia">LCD</div>
	<div style="background:#f5f4f4;"class="potencia">1200</div>
	<div style="background:#f5f4f4;"class="potencia"><span></span></div>
	<div class="potencia">1920_x_1080</div>
</div>

<div class="object object2">
	<div class="potencia">LCD</div>
	<div style="background:#f5f4f4;"class="potencia">2800</div>
	<div style="background:#f5f4f4;"class="potencia"><span></span></div>
	<div class="potencia">I'm the highest cell in this row, but left and right cells are smaller.</div>
</div>

<div class="object object3">
	<div class="potencia">LED, LCD</div>
	<div style="background:#f5f4f4;"class="potencia">3500 lm</div>
	<div style="background:#f5f4f4;"class="potencia"><span></span></div>
	<div class="potencia">1080p Full HD</div>
</div>

<div class="object object4">
	<div class="potencia">LED</div>
	<div style="background:#f5f4f4;"class="potencia">2800</div>
	<div style="background:#f5f4f4;"class="potencia"><span></span></div>
	<div class="potencia">1920_x_1080</div>
</div>
</div>
...