javascript - 這種評論表單的布局是怎么做出來的？
問題描述
這是簡書的評論表單：
我的 html 結構如下：
<form action='' method='post'> <a href='http://m.cgvv.com.cn/wenda/3430.html' class='avatar'><img src='http://m.cgvv.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 樣式？
問題解答
回答1：= =題主不會照搬其樣式么？form設置relative，頭像設置absolute……
關鍵詞：絕對定位
.avatar { margin-right: -50px; float: left;}textarea { display: block; width: 100%; margin-left: 50px;}
以上按照你的思路來的，其實要實現這種分欄布局方法有很多種，BFC、absolute、flex 都可以。
回答3：<form action='' method='post'>
<p style='width:20%;float:left'> <a href='http://m.cgvv.com.cn/wenda/3430.html' class='avatar'><img src='http://m.cgvv.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：代碼先寫4 后寫5
相關文章：
1. windows誤人子弟啊2. mysql優化 - MySQL如何為配置表建立索引？3. 實現bing搜索工具urlAPI提交4. 關于mysql聯合查詢一對多的顯示結果問題5. 數據庫 - Mysql的存儲過程真的是個坑！求助下面的存儲過程哪里錯啦，實在是找不到哪里的問題了。6. 我在網址中輸入localhost/abc.php顯示的是not found是為什么呢？7. 如何用筆記本上的apache做微信開發的服務器8. python - linux怎么在每天的凌晨2點執行一次這個log.py文件9. MySQL主鍵沖突時的更新操作和替換操作在功能上有什么差別(如圖)10. 冒昧問一下，我這php代碼哪里出錯了？？？
網公網安備