Question

如何设置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/

Answer 1

您只需使用 Flexbox

进行css即可

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

逻辑规定100％宽度意味着填充整个父元素，因此宽度与父元素基本相同

$(document).ready(function() {
    $(".img-url").width(function() {
        return $(this).parent().width() - $('.img-container').width()
    });
});

如果您想轻松地内联元素，请浮动它们或添加display: inline-block;

FIDDLE

使用jQuery计算元素的宽度

2 个答案: