javascript - 这种评论表单的布局是怎么做出来的？

Question

这是简书的评论表单：

我的 html 结构如下：

<form action="" method="post">
    <a href="" class="avatar"><img src="images/avatar.jpg" alt=""></a>
    <textarea placeholder="写下你的评论..."></textarea>
    <footer>
        <span>Ctrl + Return 发表</span>
        <button type="reset">取消</button>
        <button type="submit">发送</button>
    </footer>
</form>

我设置头像 .avatar 元素左浮动，然后设置 textarea 的 width=100%，但是这样设置后 textarea 会新起一行，无法达到想要的效果。我想实现简书这样的布局该怎么设置 css 样式？

Answer 1

= =Won’t the questioner copy his style?
The form is set to relative, the avatar is set to absolute...

Keywords: absolute positioning

Answer 2

.avatar {
    margin-right: -50px;
    float: left;
}
textarea {
    display: block;
    width: 100%;
    margin-left: 50px;
}

The above is based on your idea. In fact, there are many ways to implement this column layout, including BFC, absolute, and flex.

Answer 3

<form action="" method="post">

<p style="width:20%;float:left">
    <a href=""  class="avatar"><img src="images/avatar.jpg" alt=""></a>
</p>
<p class="floatRight" style="width:80%;float:right"> 
    <textarea placeholder="写下你的评论..."></textarea>
    <footer>
        <span>Ctrl + Return 发表</span>
        <button type="reset">取消</button>
        <button type="submit">发送</button>
    </footer>
</p>

</form>

Answer 4

Write 4 first and then 5 in the code