今天去阿里面試的時候被問到這個了。。。當時表示沒聽說過，然后讓面試官給我解釋了一下，回來繼續補習。
首先上代碼：
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .main { background:#D6D6D6; } .left { background:#E79F6D; } .right { background:#7BD; } /* core layout css */ .main { float:left; width:100%; } .left { float:left; width:190px; margin-left:-100%; } .right { float:left; width:230px; margin-left:-230px; } .in{margin:0 230px 0 190px} </style> </head> <body> <div id="bd"> <div class="main"><div class="in">test11111111111</div></div> <div class="left">test11111111111</div> <div class="right">test11111111111</div> </div> </body> </html>
核心思想是利用margin負邊距進行擠呀擠：
負邊距 margin-left為負值，且兩個元素不在一行的時候（可以用元素float:left,width:100%實現）margin-left可以吃掉兄弟元素的margin.