html - css 向左浮动并输入 100% 宽度

Question

我希望输入为 width: 100%; 并且位于图像的右侧。不使用表格是否可能？如果是，我该如何实现？

HTML:

<div class="wrapper">
    <img src="http://www.iconpot.com/icon/thumbnail/geek-avatar.jpg" />
    <input/>   
</div>

CSS:

input {
    width:100%;
    float:left;
}

FIDDLE

谢谢

Answer 1

你可以用 calc() 来做到这一点

FIDDLE

input
{
    width: calc(100% - 130px); /* width of img + extra padding between */
}

您还可以通过设置 img 样式来对齐输入

img
{
    vertical-align: middle; /* or top /bottom.. etc */
}