Question

我想在响应式输入栏的左侧对齐div块。

但是我有问题让它反应灵敏，如果你在全屏幕上观看它还可以，但仍然没有响应，在较小的屏幕上它会分崩离析。

<div class="reply_placeholder">
  <div class="logo"></div>
  <input type="text" class="input" placeholder="Click here to reply">
</div>

http://jsfiddle.net/499u5ka6

Answer 1

试试这个：

.logo {
  width: 50px;
  height: 50px;
  background-image: url("http://placekitten.com/g/200/200");
  background-size: cover;
  background-position: center center;
  float:left;
}

.reply_placeholder input {
  height: 50px;
  padding: 0px;
  border: none;
}

我希望这就是你要找的东西。

Answer 2

您可以尝试将width替换为width: calc

.reply_placeholder input {
  display: block;
  width: calc(100% - 70px);  /*adjust the 70px as needed*/
  height: 50px;
  float: right;
}

Answer 3

实现您所寻找的目标的最佳方式是首先使用box-sizing: border-box;以下小提琴：

http://jsfiddle.net/499u5ka6/5/

我为所有东西添加了边框。但您可以修改CSS以仅影响.reply_placeholder及其中的所有内容，以免影响整个页面和网站。

应用box-sizing: borer-box后，您可以将position: absolute添加到图片中，然后使用top: 50%; left: 0进行定位。然后将padding-left的{{1}}从.reply_placeholder更改为30px。根据您的需要调整所有这些值，以获得您正在寻找的间距和位置。

最后，将输入字段宽度更改为65px。

应该对您的CSS进行所有修改。更新后的CSS如下：

100%

Answer 4

最好使用背景图像作为徽标，但如果你想用div来做，一个简单的解决方法是简单地设置父显示：flex; http://jsfiddle.net/499u5ka6/9/

.reply_placeholder {
    padding: 30px 30px 20px 30px;
    position: absolute;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    border-top: 1px solid #DDD;
    display: flex;// add this
}

将响应输入与图像块对齐

4 个答案: