手寫 div 布局大概要有多快？
今天去面試web前端，要寫一個 div 的布局，最後用了一個半小時弄好，面試的人直接說這個很難嗎，要用這麼久。因為之前都是在網上搜別人的 css 布局，這次全部用 dw 手寫，所以很多地方都出錯，調試了很久……我之前那個人也有寫，但能看出應該不是自適應的，而是寫了具體的 px 值。想知道一般全手寫這個要多久啊？
div
div
3個div做float: left
div
div float: left
div
div
div margin-left
我估計10分鐘差不多吧，基本的思路是先分行，每一個行里看長啥樣，採用經典的兩列、三列等布局方式就好了
http://jsbin.com/loyuhepaji/edit?html,css,output
不知道這個拿去面試會不會被打……反正要不了幾分鐘……
題主在檢測智商，大家切莫被釣魚，散了吧
【8月15日更新】【Flex布局 + PS切片 + word代碼】
目錄：
【1】Flex 布局
【2】PhotoShop 切片導出CSS
【3】Word 文檔HTML格式保存
【4】純手寫CSS + HTML
【5】Bootstrap Grid 布局
【6】抖機靈
--------------------------------------------------------------------------------------------------------------------------------------------
還是鼓勵題主自己要多多練習。不管是DW還是什麼，工具始終是幫助你提高生產力的，它不能取代你的能力。題主加油~
之前有知友提到了flex的布局，那個也是超方便。但是我在flex這方面接觸不多，所以只能是不要臉的自己試一下然後貼上來：
緊接著HTML 代碼：
&
&
&
&&
&
&
&&
&&
&&
&
&
&
&&
&&
&
&&
&
&
&
然後CSS部分：
&
background-color:white;
width:900px;
height:auto;
margin:auto;
}
.row{
width:900px;
height:auto;
display: flex;
background-color:white;
}
.elem{
margin-top:20px;
margin-right:20px;
flex:1;
background-color:#EEE;
height:200px;
}
.tall-elem{
height:500px;
}
.child{
margin:20px 20px 0px 20px;
background-color:#999;
width:calc(100% - 40px);
height:100px;
}
.elem:nth-last-child{ margin-right:0px; }
&
這個方法我和題主一樣，一起努力學習吧~~
# PS 切片
這個也是從知友這裡學習到的，用PS切片工具能導出CSS文件，具體方法還請自行學習啦：
然後每一個塊其實都是一個圖片，PS會記錄下這些圖片的位置屬性並導出成CSS文件：
HTML + CSS代碼如下：
&
&
&
&
&
&