Question

这是我关于同样的第二个问题，我只是不知道如何编辑它并让它在列表中提升或自动发生？ ...

无论如何，在实际问题上，我在一个范围内都有一个图像和输入框，现在我想将它们显示在彼此旁边。

图像为48x48，输入字段应填充剩余宽度。由于代码现在它不会在缩放时中断，它应该是这样的。

如果我添加宽度：100％;到输入框然后它会在缩放时中断，我不明白为什么我希望它填充剩余宽度的100％。

HTML：

<div id="vault_chat">
    <div id="vault_chat_header">
        <span class="user_avatar"><img src="<%tdir%>img/default_avatar.png" alt="Default Avatar" /></span>
        <span class="vault_chat_text_field"><input type="text" value="Enter a message..." /></span>
    </div>
</div>

CSS：

#vault_chat {

}

#vault_chat_header {
    height: 48px; //tried a fixed height here but it just goes outside the header.
}

.vault_chat_text_field input[type=text] {
    vertical-align: top;
}

.user_avatar img {
    width: 48px;
    height: 48px;
}

如果您有解决方案，请在小提琴中为我演示。

Answer 1

如果我理解正确，我会使用Nicole Sullivan的media对象抽象。这是fiddle（仅供参考）。

HTML：

<div class="media">
  <a href="#" class="img"><img src="http://placehold.it/48x48" alt="" /></a>
  <div class="bd"><input type="text"></div>
</div>

CSS：

.media {margin:10px;}
.media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
.media .img {float:left; margin-right: 10px;}
.media .img img {display:block;}
.media .imgExt {float:right; margin-left: 10px;}
input {
  width: 100%;
}

图像和输入字段

1 个答案: