textarea和提交按钮之间的关系

I am trying to make facebook style comment post area but css is not working. What I'm trying to do. When increased the height of the textarea i want to submit button move down at the same time. When you write a few lines in the textarea, you'll see the submit button does not go move down at the same time.

我正在尝试制作facebook风格的评论帖子区域但css无法正常工作。我想做什么。当增加textarea的高度我想要提交按钮同时向下移动。当您在textarea中写几行时,您会看到提交按钮不会同时向下移动。

HTML

<div class="stcommenttext">
    <form method="post" action="">
        <div class="comtextarea">
            <div class="yorumyazalani">
                <textarea name="comment" class="comment" maxlength="200" id="" rows="2" cols="50" value="Add your comment here...."></textarea>
            </div>
            <div class="comgonder">
                <input type="submit" value="" id="" rel="" class="comment_button wallbutton" />
            </div>
        </div>
    </form>
</div>

CSS

.comment {
    border:1px solid #fff;
    width:425px;
    margin-left:3px;
    margin-top:3px;
    font-family:'lucida grande', tahoma, verdana, arial, sans-serif;
    font-size:12px;
    resize:none;
    background-color:#f4f4f4;
}
.comtextarea {
    float:left;
    width:494px;
    margin-left:3px;
    height:auto;
    border:1px solid #d8dbdf;
    background-color:#fff;
}
.comtextarea textarea {
    min-height:30px;
}
.yorumyazalani {
    float:left;
    width:auto;
    height:auto;
}
.comgonder {
    float:right;
    width:auto;
    height:auto;
    bottom:0px;
    margin-left:-5px;
}
.wallbutton {
    float:left;
    background-color: #fff;
    min-width: 32px;
    padding: 4px;
    text-align: center;
    background-position: left bottom;
    background-repeat: repeat-x;
    border: 1px solid #fff;
    color: white !important;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    margin-top: 7px;
    padding: 5px;
    margin-left:5px;
    text-decoration:none;
    background-image:url(https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10291103_828742610487379_816788942451910142_n.jpg);
    background-repeat:no-repeat;
    background-position:left;
    outline:none;
}

Here is the DEMO

这是DEMO

3 个解决方案

#1

Try this CSS for the button:

尝试使用此CSS作为按钮:

.comgonder {
  width: auto;
  height: auto;
  margin-bottom: 8px;
  vertical-align: bottom;
  display: inline-block;
}

And this for the textarea:

这对于textarea:

.yorumyazalani {
  width: auto;
  height: auto;
  vertical-align: top;
  display: inline-block;
}

This will make your 2 form elements inline (instead of floating them) and allow the button to be aligned based on the bottom of the textarea, instead of the top.

这将使您的2个表单元素内联(而不是浮动它们)并允许按钮基于textarea的底部而不是顶部对齐。

Updated Demo: http://codepen.io/anon/pen/CdxDI

更新演示:http://codepen.io/anon/pen/CdxDI

#2

You can fix this in a couple of simple steps:

您可以通过几个简单的步骤解决此问题:

Set position: relative; on .comtextarea. Now each child can relate to it's container.

设定位置:相对;在.comtextarea。现在每个孩子都可以与它的容器相关联。

Set position: absolute; on .comgonder. Now you can position this element in relation to .comtextarea.

设定位置:绝对;在.comgonder上。现在,您可以将此元素与.comtextarea相关联。

Set bottom: 5px; and right: 5px; on .comgondor. It now follows the right corner of .comtextarea.

设置底部:5px;和右:5px;在.comgondor。现在它位于.comtextarea的右上角。

Codepen Fork

#3

.comtextarea
  {
     position: relative;
  }

.comgonder
  {
     position: absolute;
     right: 0px;
     bottom: 0px;
  }

You can change the right/bottom offsets for better spacing/alignment if you like

如果您愿意,可以更改右/底偏移以获得更好的间距/对齐

#1