如何设置与的宽度input相等的100%宽度img？
我的目标是将它们都显示在同一行上，并使input它们占据剩余空间的全部宽度。
这就是我到目前为止
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/
您可以使用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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句