在處理本質上相對的事物時，也常會用到與前面類似的表格排版設計。這次你不是讓它們在中央交會，而是讓兩個元件擺在瀏覽器視窗的兩側。這也許是一個你想讓商標放在頁面右上角，而讓導覽元件放在頁面左上角的案例：
From：http://ccca.nctu.edu.tw/~hlb/trans/practicalcss/
在這裡我們使用跟表單範例裡一樣的 DIV.ROW，但這次會使用不同的 SPAN。左邊的 SPAN 往左浮動，而且文字往左靠。右邊的 SPAN 往右浮動，而且文字往右靠。
CSS：
div.row span.left { float: left; text-align: left; font-weight: bold; color: #fff; width: 49%; }
div.row span.right { float: right; text-align: right; font-weight: bold; color: #fff; width: 49%; }
HTML：
<div style= "width: 90%; background-color: #666;border: 1px solid #333; padding: 0px; margin: 0px auto;"><div class="spacer"></div> <div class="row"><span class="left">首頁 > 產品</span><span class="right">[商標]</span></div> <div class="spacer"></div> </div>
Please follow and like us:
