javascript - 這種評(píng)論表單的布局是怎么做出來的?
問題描述
這是簡書的評(píng)論表單:
我的 html 結(jié)構(gòu)如下:
<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='寫下你的評(píng)論...'></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 樣式?
問題解答
回答1:= =題主不會(huì)照搬其樣式么?form設(shè)置relative,頭像設(shè)置absolute……
關(guān)鍵詞:絕對(duì)定位


.avatar { margin-right: -50px; float: left;}textarea { display: block; width: 100%; margin-left: 50px;}
以上按照你的思路來的,其實(shí)要實(shí)現(xiàn)這種分欄布局方法有很多種,BFC、absolute、flex 都可以。
回答3:<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='寫下你的評(píng)論...'></textarea> <footer><span>Ctrl + Return 發(fā)表</span><button type='reset'>取消</button><button type='submit'>發(fā)送</button> </footer></p>
</form>
回答4:代碼先寫4 后寫5

相關(guān)文章:
1. 運(yùn)行python程序時(shí)出現(xiàn)“應(yīng)用程序發(fā)生異常”的內(nèi)存錯(cuò)誤?2. 利用IPMI遠(yuǎn)程安裝centos報(bào)錯(cuò)!3. html5和Flash對(duì)抗是什么情況?4. javascript - QQ第三方登錄的問題5. 在mac下出現(xiàn)了兩個(gè)docker環(huán)境6. node.js - mongodb查找子對(duì)象的名稱為某個(gè)值的對(duì)象的方法7. 測試自動(dòng)化html元素選擇器元素ID或DataAttribute [關(guān)閉]8. spring-mvc - spring-session-redis HttpSessionListener失效9. java - Spring boot 讀取 放在 jar 包外的,log4j 配置文件,系統(tǒng)有創(chuàng)建日志文件,不寫入日志信息。10. 淺談Vue使用Cascader級(jí)聯(lián)選擇器數(shù)據(jù)回顯中的坑

網(wǎng)公網(wǎng)安備