Сделать div шириной 50% от его содержимого

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я просматривал Google / форумы и действительно не нашел ответа на этот вопрос. Мне интересно, могу ли я в CSS увеличить div до 50% ширины его содержимого. Я вижу, что calc() не работает с auto, но в основном я хочу добиться width: calc(auto /2) . Могу ли я сделать это в CSS, или это нужно делать после загрузки страницы в javascript / jquery?

Примечание: высота будет равна 100% с изображением в нем, поэтому я не хочу использовать значения px.

Комментарии:

1. вы не можете изменить размер div в соответствии с размером его дочерних элементов, но легко сделать обратное. Я думаю, что сначала мне понадобится jsFiddle от вас.

2. поскольку дочерние элементы принимают форму своих родителей, как вы можете даже определить, насколько велик дочерний элемент, чтобы сократить его вдвое?

Ответ №1:

Предполагая, что ваш внутренний контент — это просто изображение, может быть, что-то вроде этого:

 var innerwidth = $('.parentdiv').children('img').width();
$('.parentdiv').css('width', innerwidth);
 

Возможно, я неправильно понимаю вопрос, но я не понимаю, почему это не сработает. Надеюсь, это поможет 🙂

Редактировать: я согласен с тем, что сказано в комментариях — на самом деле нет способа использовать CSS для определения размера дочернего элемента.

Комментарии:

1. это должно сработать, и я, вероятно, получу что-то подобное. В моем случае это было бы innerwidth / 2, но это действительно ни здесь, ни там относительно того, будет ли ваш код работать. Мой главный вопрос заключался в том, можно ли это выполнить в css, который, как представляется, невозможен.

2. Правильно — CSS способен смотреть только вперед и вниз в дереве DOM, а не вверх или назад. Все, что вы можете сделать, это установить для дочернего элемента значение 50% от его собственной ширины и обернуть родительский элемент вокруг него или установить для дочернего элемента значение 200% от его родительского элемента.