2

素敵なコメント欄を作ろうとしています。テキストエリアの前に画像を1行/行で表示したい。画像サイズは固定する必要があります。テキストエリアは残りのスペースを埋める必要があります。ウェブサイトの幅は動的であるため、テキストエリアの幅を固定してもうまくいきません。

ただし、テキスト領域は画像の横には表示されませんが、画像の下には表示されます。

<img src="http://i2.wp.com/c0589922.cdn.cloudfiles.rackspacecloud.com/avatars/male200.png" style="float:left;"/>
<textarea style="float: left; height: 200px; margin-left: 210px; width:100%"></textarea>

このフィドルを参照してください。

これを達成する方法についてのアイデアはありますか？私が話していることを確認するには、cnn.com のコメント ボックスをチェックしてください。

4

5 に答える 5

1

このコードはあなたがやりたいことをすると思います：

<div style="position:absolute; left:100px; right:100px;">
  <div style="position:relative;">
    <img src="http://i2.wp.com/c0589922.cdn.cloudfiles.rackspacecloud.com/
          avatars/male200.png" style="position:absolute;">
    <div style="position: absolute; left:210px; right:0px; top:0px;">
      <input type="textbox" style="width:100%; height:200px; display:block;
          padding:0;">
    </div>
  </div>
</div>

微調整が必​​要な場合があります。私の答えは、この投稿に基づいています: http://jsfiddle.net/QaWMN/2/。

于 2013-02-10T10:50:49.903 に答える
0

少し奇妙に見えますが、これでうまくいきます。

http://jsfiddle.net/6shan/4/

相対div内のimgおよびtextareaに絶対位置を使用します。

<div>
    <img src="..."/>
    <textarea></textarea>
</div>

CSS：

div {
    position: relative;
    padding: 0px;
    margin: 0px;
    height: 100px;
}

div img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 1px;
    left: 1px;
}

div textarea {
    display: block;
    position: absolute;
    top: 0px;
    left: 110px; /* 100px of the image's width plus 10px margin */
    right: 0px;
    height: 100px;
}
于 2013-02-10T06:41:45.230 に答える
0

これを試して

HTMLコード:

<div>
   <img src="http://i2.wp.com/c0589922.cdn.cloudfiles.rackspacecloud.com/avatars/male200.png" />
    <textarea cols="20" rows="4"></textarea>
</div>

CSS コード

div img {
    float: left;
    width: 100px;
    height: 120px;
    margin: 0 5px 0 0;
}

div textarea {
    width: 80%; // adjust this value you need
}
于 2013-02-10T06:30:29.567 に答える
0

私はあなたがこのようなものを探していると思います: http://jsfiddle.net/6shan/

html は次のとおりです。

<div class="comment">
    <div class="avatarContainer">
    <img class="avatar" src="http://i2.wp.com/c0589922.cdn.cloudfiles.rackspacecloud.com/avatars/male200.png"></img>
    </div>
        <div class="commentBody">
        <div class="commentHeader">commentHeader</div>
        <textarea class="commentText">commentText</textarea>
    </div>
</div>

付属の css は次のとおりです。

.comment
{height:150px; width:250px;
    border:1px solid black;
    padding:15px;
}
.avatar 
{ height:px; width:24px;}
.avatarContainer
{ height:150px; width:30px;float:left;}
.commentBody
{ height:150px;width:220px;float:right;}
.commentHeader
{height:30px; width:100%; margin-left:10px; border-bottom:1px solid black;}
.commentText 
{ height:100px; width:100%;
margin:10px 10px 10px 10px;}
于 2013-02-10T06:36:20.603 に答える