Мобильная версияЯ пытался заставить изображения располагаться рядом друг с другом в одном ряду, но либо они остались слишком высокими и переполнили диалоговое окно (ограничено родительской шириной), либо они правильно ограничены родительской высотой, но тогда в блоке div «row» появилось дополнительное пробельное пространство, которое, по-видимому, было бы точно такой же шириной, как если бы изображения были ограничены по ширине, а не по высоте.
Код: Выделить всё
*, *::before, *::after {
box-sizing: border-box;
}
#popup {
box-shadow: 0 0 12px rgba(0,0,0,.6);
position: relative;
overflow: visible;
text-align: center;
padding: 1em;
max-width: 700px;
max-height: 400px;
height: 400px;
display: grid;
}
#popup .dialogOptions {
display: flex;
overflow: auto;
}
.ui-checkbox, .ui-radio {
margin: .5em 0;
position: relative;
}
.ui-radio .ui-btn {
padding: .7em 1em;
position: relative;
padding-left: 2.5em;
display: block;
border-width: 1px;
border-style: solid;
margin: 0;
text-align: left;
max-width: max-content;
height: 100%;
}
#popup img {
width: 100%;
vertical-align: top;
height: 100%;
max-width: max-content;
}
.okBtn {
text-align: center;
}Код: Выделить всё
Title of the Dialog
[img]https://placehold.co/400x600[/img]
[img]https://placehold.co/400x600[/img]
аналогично в jsfiddle с примерами высоты и изображениями-заполнителями
Я хотел бы, чтобы высота диалога определяла размеры дочерних элементов, но тогда ширина дочерних элементов должна определять полную ширину диалога.
У меня было что-то работающее в webkit (диалоговое окно, подходящее к изображениям, соответствующим высоте диалога), которое не работал в Firefox (изображения не ограничены по высоте), а в jsfiddle он делает что-то другое (изображения ограничены, но в диалоговом окне есть лишние пробелы. Что-то я делаю неправильно с максимальной шириной или высотой: 100%? Я дважды проверил другие вопросы, которые научили меня, что для высоты необходимо указать явную высоту: 600 пикселей (например) в контейнере верхнего уровня: 100% работает, но это не работает одинаково для двух браузеров, которые я тестировал до сих пор.
Мне бы хотелось, чтобы что-то работало стабильно, даже если мне придется использовать что-то вроде justify-items: space-between в строке в качестве компромисса, чтобы дополнительное пространство выглядело намеренно.
Обходной путь, который я нашел, состоит в том, чтобы установить явную высоту для элементов div, равную относительной высоте, которую я нашел. хотите, и сделайте всплывающее окно div display:block. Это работает как для Chrome, так и для Firefox, но почему-то параметры в приведенном ниже фрагменте кода не центрируются, как в моем реальном случае использования. И это не идеальный ответ, потому что я не хочу вручную угадывать высоту, оставшуюся в диалоговом окне, которое должно быть заполнено параметрами div.
Код: Выделить всё
*, *::before, *::after {
box-sizing: border-box;
}
#popup {
box-shadow: 0 0 12px rgba(0,0,0,.6);
position: relative;
overflow: visible;
text-align: center;
padding: 1em;
max-width: 700px;
max-height: 400px;
height: 400px;
display: block;
}
#popup .dialogOptions {
display: flex;
height: calc(100% - 77px);
}
.ui-checkbox, .ui-radio {
margin: .5em 0;
position: relative;
}
.ui-radio .ui-btn {
padding: .7em 1em;
position: relative;
padding-left: 2.5em;
display: block;
border-width: 1px;
border-style: solid;
margin: 0;
text-align: left;
max-width: max-content;
height: 100%;
}
#popup img {
width: 100%;
vertical-align: top;
height: 100%;
max-width: max-content;
}
.okBtn {
text-align: center;
}Код: Выделить всё
Title of the Dialog
[img]https://placehold.co/400x600[/img]
[img]https://placehold.co/400x600[/img]
Подробнее здесь: https://stackoverflow.com/questions/798 ... nt-width-b
