2

我正在尝试制作漂亮的评论框。我想在一行/行的文本区域之前显示一个图像。图像大小应该是固定的。textarea 应该填满剩余的空间。该网站具有动态宽度，因此修复 textarea 宽度对我不起作用。

但是文本区域不会靠近图像，而是会在图像下方。

<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

试试这个

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 回答
0

它看起来有点奇怪，但这可以解决问题：

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

对 img 和相对 div 内的 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

我发现不使用 position: absolute 的最佳方法如下：

img {
    width: 100px;
    height: 100px;
    float: left;
}
.wrap {
  display: block;
  padding-left: 100px;
}
textarea {
    display: block;
    height: 100px;
    width: 100%;
}
<img src="http://i2.wp.com/c0589922.cdn.cloudfiles.rackspacecloud.com/avatars/male200.png"/>
<div class="wrap">
  <textarea></textarea>
</div>

于 2017-12-04T23:49:56.473 回答