HTML CSS三欄佈局
阿新 • • 發佈：2018-12-15
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .header,.footer { width:100%; height:150px; background:#ff0; border:1px dashed #f00; } .container { position: relative; margin:0 auto; width:80%; height:500px; border:1px dashed #0f0; background:#ffd; } .sidebar { position: relative; width:80%; background:orange; border:2px dotted inherit; float:right; height:100%; } .extraContent { position: relative; float:left; width:15%; /*margin-left:-304px;*/ background-color: red; height:100%; } .content { margin-left:504px; background:#dec; height:100%; } </style> </head> <body> <div class="header"> 標題 </div> <div class="container"> <div class="extraContent"> <!-- <div id="content"> 內容 </div> --> </div> <div class="sidebar"> 側邊欄 </div> </div> <div class="footer"> 頁尾 </div> </body> </html>
