CSS width:100% textarea pour le commentaire (responsive)

J'ai besoin de peu d'aide pour mon CSS.

Je suis en train de faire un système de commentaire, mais il a quelque chose a mal tourné.

C'est mon DÉMO page de codepen.io

Vous pouvez le voir il est un avatar de l'utilisateur et textarea. Le conteneur max-width:650px; lorsque vous avez réduit la largeur du navigateur, il est automatiquement en train de changer.

quelqu'un peut m'aider à ce sujet?

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

Je veux le faire comme ça:

CSS width:100% textarea pour le commentaire (responsive)

OriginalL'auteur innovation | 2015-05-11

  1. 2

    Pour les scénarios comme ça, je combiner float:left;et float:none; L'avatar wrapper div obtient le float:left; et le commentaire wrapper div obtient le float:none;.

    L'astuce ici est de mettre padding-left sur le float:none; div égale à la largeur de la 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;
}

    Ici est un travail démo

    OriginalL'auteur Tasos K.

  2. 0

    Voir ce violon

    J'ai changé votre CSS un peu. Voir les modifications ci-dessous. Le problème avec le CSS que tu n'a pas utilisé de largeur pour .commenter. Ainsi il a pris par défaut de 100% de largeur.

    CSS

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

    MODIFIER

    utilisation de la largeur de .commenter comme width: 35px;..j'ai choisi 35px parce que c'est la largeur de l'image de l'avatar.

    Cela a l'air terrible lorsque vous redimensionnez la zone de résultat. .commenter devrait probablement avoir une largeur fixe.
    Merci pour votre répondre @lal mais j'ai changer de navigateur réduite, avatar a un problème.
    Voir mon édition..

    OriginalL'auteur Lal

  3. -1

    vous pouvez donner le nom de la classe form-control à la <textarea> comme ceci:

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

    Référence: https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp

    OriginalL'auteur Sumit Patel