問題描述

這是簡書的評論表單：

我的 html 結(jié)構(gòu)如下：

<form action='' method='post'> <a href='http://www.gepszalag.com/wenda/3430.html' class='avatar'><img src='http://www.gepszalag.com/wenda/images/avatar.jpg' alt=''></a> <textarea placeholder='寫下你的評論...'></textarea> <footer><span>Ctrl + Return 發(fā)表</span><button type='reset'>取消</button><button type='submit'>發(fā)送</button> </footer></form>

我設(shè)置頭像 .avatar 元素左浮動(dòng)，然后設(shè)置 textarea 的 width=100%，但是這樣設(shè)置后 textarea 會(huì)新起一行，無法達(dá)到想要的效果。我想實(shí)現(xiàn)簡書這樣的布局該怎么設(shè)置 css 樣式？

問題解答

= =題主不會(huì)照搬其樣式么？form設(shè)置relative，頭像設(shè)置absolute……

關(guān)鍵詞：絕對定位

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

以上按照你的思路來的，其實(shí)要實(shí)現(xiàn)這種分欄布局方法有很多種，BFC、absolute、flex 都可以。

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

<p style='width:20%;float:left'> <a href='http://www.gepszalag.com/wenda/3430.html' class='avatar'><img src='http://www.gepszalag.com/wenda/images/avatar.jpg' alt=''></a></p><p style='width:80%;float:right'> <textarea placeholder='寫下你的評論...'></textarea> <footer><span>Ctrl + Return 發(fā)表</span><button type='reset'>取消</button><button type='submit'>發(fā)送</button> </footer></p>

</form>

代碼先寫4 后寫5