使用带 CSS 的网格时强制图像位于列底部

Question

我使用的聊天输入框有两列，类似于 Apple 的 iphone。左列有一个 div 文本，并随着文本的扩展而向上增长。但是，我希望右侧列中的图像保持锚定在底部，如下图所示，但目前，随着您添加文本和框展开，它锚定（并上升）到顶部。

显然我不能为图像使用位置，因为它不能很好地与网格一起播放。（位置从网格中删除项目。）我真的很喜欢网格，因为它解决了将图像保持在右侧的问题，但还有一个问题。

如何让图片保持在网格栏的底部？

CSS:

.inputContainer {
border-radius: 20px;
  min-height: 30px;
  width: 300px;
  padding: 8px 15px;
  margin-top: 5px;
  margin-bottom: 5px;
  border: solid 2px #EEE;
  display: inline-block; 
position: fixed;
  bottom: 10px;
display: grid; grid-template-columns: 260px 40px;//USING GRID HERE
}
.inputBoxInner {
border-radius: 20px;
  min-height: 30px;
  width: 240px;
  margin-top: 0px;
  margin-bottom: 0px;
height:" auto";
display: inline-block; 
}

html:

<div class = "inputContainer" contentEditable="true"><div class="inputBoxInner" id="newmessage" contenteditable="true" data-placeholder="Start typing"></div><img src="/images/up-arrow-blue-75.png" width="30" height="30  style="float:right;" onclick="sendMessage();"></div></div>

提前感谢您的任何建议。

Answer 1

您应该在 <img> 元素上使用 align-self 和 justify-self 规则。

在这里，我删除了内联 float: right 并在此图像上设置了“图标”class。然后我使用这个 class 将其定位到 CSS 并将其位置设置为右下角，并为这两个规则设置值为“end”。

.inputContainer {
  border-radius: 20px;
  min-height: 30px;
  width: 300px;
  padding: 8px 15px;
  margin-top: 5px;
  margin-bottom: 5px;
  border: solid 2px #EEE;
  display: inline-block;
  position: fixed;
  bottom: 10px;
  display: grid;
  grid-template-columns: 260px 40px; //USING GRID HERE
}

.inputBoxInner {
  border-radius: 20px;
  min-height: 30px;
  width: 240px;
  margin-top: 0px;
  margin-bottom: 0px;
  height: " auto";
  display: inline-block;
}

.inputContainer .icon {
  align-self: end;
  justify-self: end;
}

<div class="inputContainer" contentEditable="true">

  <div class="inputBoxInner" id="newmessage" contenteditable="true" data-placeholder="Start typing">
    sample long text sample long text sample long text sample long text sample long text sample long text sample long text sample long text sample long text sample long text
  </div>
  <img class="icon" src="https://s3.amazonaws.com/pics.freeicons.io/uploads/icons/png/4953436661577436996-512.png" width="30" height="30" onclick="sendMessage();">
  
</div>

使用带 CSS 的网格时强制图像位于列底部

Force image to bottom of column when using grid with CSS

html

css

css-grid