Как сделать элемент на странице такой же визуальной ширины, как другой элемент точно?

Question

Я пытаюсь сделать так, чтобы элемент A '* width равнялся B ' * width, чтобы они оба визуально выглядели одинаковыми .

Я пытался сделать:

$('#A').css('max-width', $('#B').css('width'));

Но это не работает так, как я хочу, чтобы , потому что B width составляет 83%, поэтому максимальная ширина A становится 83%.

Это не делает A визуально таким же, как просто становится 83% родительского элемента, что делает его больше на странице.

Есть ли способ рассчитать визуальную ширину B , чтобы я мог использовать это как A max-width, используя jQuery?

РЕДАКТИРОВАТЬ: я не могу редактировать структуру документа.

Answer 1

только через javascript, offsetWidth должны делать:

Свойство HTMLElement.offsetWidth только для чтения возвращает ширину макета элемента в виде целого числа.

var myW = document.querySelector("#a").offsetWidth;
document.querySelector("#b").style.width=myW+"px";

p {float:left;clear:left;border:solid;margin:1px 1em;box-sizing:border-box;}

<p id="a">some content to give a width</p>
<p id="b">:</p>

Answer 2

Вам нужно установить ширина , а не максимальная ширина .

$('#A').css('width', $('#B').width() )

https://codepen.io/doughballs/pen/zYGrMoK

Максимальная ширина ограничивает, насколько широким может быть элемент - если он не соответствует ширине, которую вы указали в качестве максимальной ширины, то максимальная ширина не будет иметь никакого эффекта. Ширина указывает элементу, насколько он должен быть .