CSS宽度：100％textarea用于评论（响应）

Question

我的CSS需要一些帮助。

我正在尝试建立评论系统，但它出了问题。

这是 codepen.io

中的DEMO页面

你可以看到有一个用户头像和textarea。容器max-width: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>

CSS

body {
  background-color: #dddddd;
}

.container {
  position: relative;
  max-width: 650px;
  margin: 0px auto;
  margin-top: 50px;
}

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

.commenter {
  float: left;
}

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

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

.textinput {
  float:left;
  width: 100%;
  min-height: 35px;
  outline: none;
  resize: none;
  border: 1px solid #f0f0f0;
}

我想这样做：

Answer 1

您可以尝试使用calc();为您执行计算...请注意，您需要在此处添加供应商前缀。

＆＃13;

＆＃13;

body {
  background-color: #dddddd;
}

.container {
  position: relative;
  max-width: 650px;
  margin: 0px auto;
  margin-top: 50px;
}

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

.commenter {
  float: left;
}

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

.comment-text-area {
  float: right;
  width: calc(100% - 45px);
  height: auto;
  background-color: red;
}

.textinput {
  float:left;
  width: 100%;
  min-height: 35px;
  outline: none;
  resize: none;
  border: 1px solid #f0f0f0;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

作为选项而不是浮动使用display：table

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #dddddd;
}

.container {
  position: relative;
  max-width: 650px;
  margin: 0px auto;
  margin-top: 50px;    
}

.comment {
  background-color: #00f;  
  height: auto;
  display: table;
  width: 100%;
  padding: 5px;
}

.commenter,
.comment-text-area{
  display: table-cell;
  vertical-align: top;
}
.commenter{
  width: 35px;
  padding-right: 5px;
}
.commenter img {
  width: 35px;
  height: 35px;
}

.comment-text-area {  
  width:100%;
  height: 100%;
  /*background-color: red;*/  
}

.textinput {  
  width: 100%;
  min-height: 35px;
  outline: none;
  resize: none;
  border: 1px solid #f0f0f0;
}

<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>

Answer 3

对于这样的场景，我将float:left;和float:none;结合起来。头像包装div得到float:left;，评论包装div得到float:none;。

这里的诀窍是将padding-left放在float:none; div上，等于float:left; div的宽度。

.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;
}

这是一个有效的demo

Answer 4

请参阅此fiddle

我已经改变了你的CSS。请参阅以下更改。你的CSS的问题是你没有使用.commenter的宽度。因此默认为100％宽度。

CSS

.commenter {
    float: left;
    width: 6%;
}
.comment-text-area {
    float: left;
    width: 94%;
    height: auto;
    background-color: red;
}

修改

将.commenter的宽度用作width: 35px; ..我选择35px，因为它是头像图像的宽度。

Answer 5

仅更改.comment-text-area height:94%

body {
  background-color: #dddddd;
}

.container {
  position: relative;
  max-width: 650px;
  margin: 0px auto;
  margin-top: 50px;
}

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

.commenter {
  float: left;
}

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

.comment-text-area {
  float: left;
  width: 94%;
  height: auto;
  background-color: red;
}

.textinput {
  float:left;
  width: 100%;
  min-height: 35px;
  outline: none;
  resize: none;
  border: 1px solid #f0f0f0;
}

<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>

Answer 6

您可以将类名form-control提供给<textarea>，如下所示：

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

参考：https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp