問題描述

這是簡書的評論表單：

我的 html 結構如下：

<form action='' method='post'> <a href='http://www.leifengta.com.cn/wenda/3430.html' class='avatar'><img src='http://www.leifengta.com.cn/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='http://www.leifengta.com.cn/wenda/3430.html' class='avatar'><img src='http://www.leifengta.com.cn/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