Fiddle

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 */
}

Answer 2

演示： http://jsfiddle.net/abhitalks/DL8kG/9/

想法：

将图像包装并输入自己的容器中。在容器上使用display: table-cell。使用vertical-align: middle排队。这将允许你有100％的宽度。

标记：

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

CSS ：

div.wrapper {
    width: 100%;
}
.imgWrap {
    display: table-cell;
}
.inputWrap {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
    padding: 4px;
}
input {
    width: 100%;
}

Answer 3

使用浮动和溢出技巧。将图像浮动到左侧，并将输入放在一个隐藏溢出的容器中。输入的宽度为100％。输入的容器将占用屏幕的其余部分（我假设你的意思是100％）：

<强> HTML

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

<强> CSS

img{
    float:left;
}
.inp{
    overflow:hidden;
    background:#F00;
}
.inp input{
    width:100%;
}

JSFiddle

请注意默认样式（填充，边框..）将如何影响输入的总宽度。

Answer 4

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

<强> CSS

#input {

        display:table-cell;
     }
input{
    width:100%;
    float:left;
}
#img {
    width:130px;
    float:left;
    border:1px solid black;
    display:table-cell;
}

Fiddle

Answer 5

<div class="wrapper">

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

css向左浮动并输入100％宽度

5 个答案:

Fiddle