在HTML和CSS中以固定大小响应图像旁边的文本输入

我正在开发一个网站。现在我正在美化我的网站。现在我在设计我的网站时遇到了问题

这是我想要达到的目标

正如您在高亮区域看到的，div中有一个图像和文本区域。我想让它响应。我的意思是，它会有最大宽度，当用户降低屏幕尺寸时，它会变小，但它有最小宽度。我的意思是父div不是固定大小的。它将改变

但我总是希望他们肩并肩。但是图像的大小总是固定的。无论屏幕大小如何变化，它都不会改变。但只有文本输入字段会根据父项进行响应。这是我的密码：

这是我的HTML

  <div>
    <div class="comment-form">
         <img class="comment-avatar" src="/Images/user_avatar.png" />
         <textarea placeholder='Please log in first' class="comment-textarea"></textarea>
    </div>
  </div>

正如您在css中所看到的，我将注释表单响应宽度设置为100%，最小宽度和最大宽度。化身图像将具有固定大小。问题是设置文本区域的宽度。我总是希望图像和文本区域并排。我希望textarea占据表单区域的其余部分。所以我用百分比来设置它的宽度。如你们所见，现在宽度是86%。如果我将其设置为100%，表单将变成如下所示

但在当前代码中，我得到了第一张图像。但当我调整屏幕大小时，它会变成这样

他们不再肩并肩了。因此，我当前的代码没有响应。我想做的是，我希望图像始终固定在一边，而希望文本区域占据表单容器的剩余区域，无论屏幕大小更改为什么。

正常工作

我已经删除了不相关的css部分。从外部容器开始的

边框框

和

填充

会产生神奇的效果

.comment-form{
  position: relative;
  width:100%;
  padding-left: 62px;
  min-width:280px;
  max-width:490px;    
  box-sizing: border-box;
}

.comment-avatar{
  position: absolute;
  width:60px;
  height:54px;
  left: 0;
}

.comment-textarea{
  width:100%;
  height:54px;
}

---

通过

position:absolute

将化身从正常流程中移除后，您可以将textarea宽度设置为100%，并在外部表单元素上使用填充来模拟偏移量。

也许，这有助于。。。我刚刚添加了

box size

，并使用

calc

计算文本区域的宽度

。评论表单{
填充物：5px；
边框：1px实心#CFD8DC；
宽度：100%；
最小宽度：280px；
最大宽度：490px；
框大小：边框框
}
.评论头像{
宽度：60px；
高度：54px；
显示：内联块；
边框：1px实心#CFD8DC；
框大小：边框框；
}
.评论文本区{
宽度：计算（100%-70px）；
显示：内联块；
边界半径：0px；
高度：54px；
显示：内联块；
框大小：边框框；
}

我想

display:flex

应该可以很好地完成这项工作！ 顺便说一句，

flexbox

是研究以下方面的一件好事：

。评论表单{
填充物：5px；
边框：1px实心#CFD8DC；
宽度：100%；
最小宽度：280px；
最大宽度：490px；
display:flex；/*这对我来说很有用，请尝试：

<div>
    <div class="comment-form">
         <div class="comment-avatar">
           <img src="/Images/user_avatar.png" />
         </div>
         <div class="textareawrap">
          <textarea placeholder='Please log in first' class="comment-textarea"></textarea>
         </div>

    </div>
  </div>

还可以尝试向“来自显示的注释”属性添加以下内容：

.comment-form{
    padding:5px;
    border:1px solid #CFD8DC;
    width:100%;
    min-width:280px;
    max-width:490px;
    display:inline-flex
}

但请注意，值“flex”和“inline flex”需要前缀才能在Safari中使用。对于“flex”使用“display:-webkit flex”，对于“inline flex”使用“display:-webkit inline flex；”“
三个步骤：

将
display:flex
应用于父容器
给
img
一个固定的宽度
使用
calc（）
请参见：


。评论表单{
显示器：flex；
宽度：60vw；
高度：84px；
边框：1px实心rgb（191）；
}
.评论头像{
宽度：60px；
高度：60px；
利润率：12像素；
背景色：rgb（127127）；
}
.评论文本区{
宽度：计算（100%-96px）；
保证金：12px 12px 12px 0；
边框：1px实心rgb（63,63,63）；
}

@Leothelion它是如何得到滚动条的？它对我很有用。现在。请问我能知道你是如何得到滚动条的吗？@Leothelion你看了以前的小提琴版本吗？我不小心先链接了错误的版本。@Kilianstison仍然如果我能减小滚动条的尺寸，我看到了滚动条，但op很高兴：）但是Codeninja93的答案更好呃。但是我对你的答案投了更高的票，我将使用codeninja93答案。非常感谢，@Leothelion我很好奇你为什么会看到一个滚动条。你是否将大小减小到超过了为
.comment表单指定的
最小宽度
操作？查看文本区域..从框中走出。
.comment-form{
    padding:5px;
    border:1px solid #CFD8DC;
    width:100%;
    min-width:280px;

}

.comment-avatar{
    width:60px;
    height:54px;
    object-fit:cover;
    border:1px solid #CFD8DC;
    position: absolute;
}

.comment-textarea{
    width:86%;
    display:inline-block;
    border-radius:0px;
    height:54px;
    margin-left: 80px;
}

.comment-form{
    padding:5px;
    border:1px solid #CFD8DC;
    width:100%;
    min-width:280px;
    max-width:490px;
    display:inline-flex
}