#css #vuetify.js
Вопрос:
У меня есть v-образная строка, состоящая из 3 столбцов, первый из которых содержит изображение, делающее его самым высоким. Высота строки соответствует высоте изображения (и, следовательно, первого столбца), но два других столбца имеют высоту только их содержимого.
lt;v-row justify="center"gt; lt;v-col cols="4" class="pb-0 pt-0 pl-3" align-self="center"gt; lt;v-img src="..." /gt; lt;/v-colgt; lt;v-col cols="6" class="pb-0 pr-6 pt-0" align-self="center"gt; lt;v-rowgt; lt;pgt;New Productlt;/pgt; lt;/v-rowgt; lt;v-rowgt; lt;smallgt;Product Namelt;/smallgt; lt;/v-rowgt; lt;/v-colgt; lt;v-col cols="2" align-self="center"gt; lt;pgt;B001lt;/pgt; lt;/v-colgt; Мне нужна последняя колонка, чтобы заполнить высоту. Предоставление col height: 100% работает только в том случае, если я даю v-строке фиксированное значение высоты, чего я не хочу делать, так как содержимое может изменяться по размеру. Как я могу этого достичь?
Комментарии:
1. можете ли вы удалить атрибут align-self=»центр» из v-col. Я думаю, это решит вашу проблему?
2. @PrakashRajotiya Это приводит к тому, что столбец выравнивается по вертикали в верхней части строки, к сожалению, не регулируется по высоте.
Ответ №1:
Добавьте align="stretch" v-row , чтобы все вложенные столбцы заполняли высоту строки.