我正在尝试制作 facebook 风格的评论帖子区域,但 css 不起作用。我正在尝试做什么。当增加 textarea
的高度时,我想同时向下移动 submit
按钮。当您在 textarea
中写入几行时,您会看到 submit
按钮不会同时向下移动。
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;
}
这是 DEMO
最佳答案
您可以通过几个简单的步骤解决此问题:
- 在
.comtextarea
上设置position: relative;
。现在每个 child 都可以与其容器相关联。 - 在
.comgonder
上设置position: absolute;
。现在您可以根据.comtextarea
定位此元素。 - 在
.comgondor
上设置bottom: 5px;
和right: 5px;
。它现在位于.comtextarea
的右上角。
关于html - textarea和提交按钮的关系,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23524424/