Html CSS宽度：100%文本评论区（响应）

我的CSS不需要什么帮助

我试图建立一个评论系统，但它出了问题

这是我在codepen.io上的页面

你可以看到有一个用户头像和文本区域。容器

最大宽度：650px当您缩小浏览器宽度时，它将自动更改

在这方面有人能帮我吗

HTML

<div class="container">
  <div class="comment">
    <div class="commenter">
      <img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xta1/t51.2885-19/11084950_1591056347778266_1536322251_a.jpg">
    </div>
    <div class="comment-text-area">
      <textarea class="textinput" placeholder="Comment"></textarea>
    </div>
  </div>
</div>

我想这样做：

<textarea class="form-control" rows="3" cols="90" ></textarea>

看到这个了吗
我已经改变了你的CSS一点。请参见下面的更改。CSS的问题是您没有为
.commenter
使用宽度。因此，它采用默认的100%宽度

CSS

编辑

使用宽度作为
.commenter
的宽度：35px。我选择35px是因为它是化身图像的宽度。
您可以尝试使用
calc（）为您执行计算。。。请记住，您需要将供应商前缀添加到此文件中


正文{
背景色：#dddddd；
}
.集装箱{
位置：相对位置；
最大宽度：650px；
保证金：0px自动；
边缘顶部：50px；
}
.评论{
背景颜色：蓝色；
浮动：左；
宽度：100%；
高度：自动；
}
.评论员{
浮动：左；
}
.img评论员{
宽度：35px；
高度：35px；
}
.注释文本区{
浮动：对；
宽度：计算（100%-45px）；
高度：自动；
背景色：红色；
}
.textinput{
浮动：左；
宽度：100%；
最小高度：35px；
大纲：无；
调整大小：无；
边框：1px实心#f0；
}
作为一个选项，使用display:table代替float


*{
填充：0；
保证金：0；
框大小：边框框；
}
身体{
背景色：#dddddd；
}
.集装箱{
位置：相对位置；
最大宽度：650px；
保证金：0px自动；
边缘顶部：50px；
}
.评论{
背景色：#00f；
高度：自动；
显示：表格；
宽度：100%；
填充物：5px；
}
.评论员，
.注释文本区{
显示：表格单元格；
垂直对齐：顶部；
}
.评论员{
宽度：35px；
右侧填充：5px；
}
.img评论员{
宽度：35px；
高度：35px；
}
.注释文本区域{
宽度：100%；
身高：100%；
/*背景色：红色；*/
}
.textinput{
宽度：100%；
最小高度：35px；
大纲：无；
调整大小：无；
边框：1px实心#f0；
}
仅更改
。注释文本区
高度：94%


正文{
背景色：#dddddd；
}
.集装箱{
位置：相对位置；
最大宽度：650px；
保证金：0px自动；
边缘顶部：50px；
}
.评论{
背景颜色：蓝色；
浮动：左；
宽度：100%；
高度：自动；
}
.评论员{
浮动：左；
}
.img评论员{
宽度：35px；
高度：35px；
}
.注释文本区{
浮动：左；
宽度：94%；
高度：自动；
背景色：红色；
}
.textinput{
浮动：左；
宽度：100%；
最小高度：35px；
大纲：无；
调整大小：无；
边框：1px实心#f0；
}
对于这样的场景，我组合了
float:left和<代码>浮动：无化身包装器div获得
float:left
和注释包装器div获得
float:none

这里的诀窍是将
padding left
放在
float:none上
div等于
float的宽度：左分区

.comment {
  background-color: blue;
  float: left;
  width: 100%;
  height: auto;
}

.commenter {
  float: left;
  width:35px;
}

.commenter img {
  width: 35px;
  height: 35px;
}

.comment-text-area {
  float: none; 
  height: auto;
  background-color: red;
    padding-left:35px;
}

这是一个工作
您可以将类名
表单控件
指定给
，如下所示：

<textarea class="form-control" rows="3" cols="90" ></textarea>



参考：
调整结果区域的大小时，这看起来很糟糕
.commenter
应该有一个固定的宽度。感谢您的回复@lal，但如果我更改了浏览器，那么avatar就有问题了。
<textarea class="form-control" rows="3" cols="90" ></textarea>