padding 導致 width 擴大

如果對一個元素同時指定了 width 和 padding, 那么它實際的寬度是 padding-left + padding-right + width, 所以, 設置了固定寬度的 div, padding 必須設置為 0, 否則, 寬度便不是所期望的.

div 如何居中?

設置比例寬度或者固定寬度, 然后 margin-left 和 margin-right 為 auto.

<div class="main"> </div>.main{margin: 0 auto;width: 800px;border: 1px solid #666; }

居中的 div 如何自適應高度?

當 div 內的元素 float 時, div 無法自適應高度. 給 div 增加一個 100% 寬度的子 div, 所有內容放到該子 div 里:

<div class="main"><div class="main_inner"></div> </div>.main{margin: 0 auto;width: 800px; }.main_inner{float: left;width: 100%;border: 1px solid #666; }

這樣, main 也沒有自適應高度, 但新增加的 main 自適應高度了, 寬度也能固定, 也就是 main 的寬度. main 的作用只有居中和寬度的功能. 也就是說, 用兩個 div 來配合, 一個實現高度, 一個實現寬度.

如何進行兩欄布局?

正確設置寬度, 是進行兩欄布局的關鍵. 把兩欄放在上面提到的 main 里.

1. 兩欄固定寬度或者比例寬度, 然后 float

<div class="main"><div class="col_1"></div><div class="col_2"></div> </div>.col_1{float: left;width: 400px; }.col_2{float: right;width: 400px; }

float左還右均可, 隨你喜歡. 非常推薦這種布局方式, 因為只需要修改一兩行CSS代碼, 就能改變兩欄的左右關系.

2. 一欄固定寬度 float, 另一欄 margin

<div class="main"><div class="col_1"></div><div class="col_2"></div> </div>.col_1{float: left;width: 400px; }.col_2{margin-left: 400px; }

當 main 不是固定寬度時, 使用此方法.

用比例寬度來設置兩欄有什么不好?

當兩欄所處的容器不是固定寬度時, 一般會用比例寬度來設置兩欄, 但這種方式適應性非常差, 受 border, margin, padding 的影響, 所以兩者的寬度和一般不是 100%. 當瀏覽器窗口小時, 兩欄間距很緊, 當瀏覽器窗口放大時, 兩欄又離得太遠. 一旦不小心設置了 border, margin, padding, 其中一個便會溜到另一個的下方, 好像消失了一樣.

如果確實需要兩欄占滿整個瀏覽器窗口, 最好使用前面提到的”一欄固定寬度 float, 另一欄 margin”方法.

總結

以上是生活随笔為你收集整理的后端开发工程师的DIV+CSS两栏布局入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。