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

问题描述

这是简书的评论表单：

我的 html 结构如下：

<form action='' method='post'> <a href='https://www.haobala.com/wenda/3430.html' class='avatar'><img src='https://www.haobala.com/wenda/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 样式？

问题解答

= =题主不会照搬其样式么？form设置relative，头像设置absolute……

关键词：绝对定位

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

以上按照你的思路来的，其实要实现这种分栏布局方法有很多种，BFC、absolute、flex 都可以。

<form action='' method='post'>

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

</form>

代码先写4 后写5