jquery - 使用 jQuery 计算元素的宽度

Question

如何将 input 的宽度设置为等于 100% - img 的宽度？

我的目标是将它们显示在同一行上，并使输入占据剩余空间的完整宽度。

这就是我到目前为止所得到的

HTML:

<div class="img-container">
  <img src="http://dreamatico.com/data_images/car/car-1.jpg"/>
</div>
<input class="img-url" placeholder="enter img url" />

CSS:

.img-container {
  width: 30px;
  height: 30px;
}
.img-container img {
  width: 30px;
  height: 30px;
}

jQuery:

$(document).ready(function(){
  var img_container_width = $('.img-container').width();
  $(".img-url").width('100%' - img_container_width);
});

jsfiddle:https://jsfiddle.net/bko38bt2/2/

Answer 1

您可以使用 Flexbox 仅使用 css 来完成此操作

.img-container {
  display: flex;
}
.img-container img {
  width: 30px;
  height: 30px;
}

input {
  flex: 1;
}

<div class="img-container">
  <img src="http://dreamatico.com/data_images/car/car-1.jpg"/>
  <input class="img-url" placeholder="enter img url" />
</div>