一行兩列的CSS設定代碼

代碼如下

複製代碼

<style type="text/css"> body{font-size:12px;} .main{width:800px;/* 總的寬度 */ background:yellow; } .main .col-1{ float:left;/* 這個是關鍵的地方 讓col1往左浮動，這樣它的後面（右邊）就可以放置別的元素（別的元素：可以是div，圖片，文字等） */ width:300px;height:300px; background:#eee;border:1px solid #ccc; } .main .col-2{ float:left;/* 這個是關鍵的地方 讓col2也往左浮動，緊跟在col1的後面 */ margin-left:5px;/* 讓col2和col1之間有些間隔 */ width:490px;height:300px;/* 給一個尺寸 可以隨意*/ background:#ddd; border:1px solid #ccc; } .clear-float{clear:both}/* 清除col1和col2的float,否則main的高度會出錯 沒有包住它裡面的有float的元素。 */ </style> <div class="main">main 我是包在外面的div  <div class="col-1">col1 我是第一列</div>  <div class="col-2">col2 我是第二列</div>  <div class="clear-float">clear-float;我用來清除浮動（清除float）</div> </div>