1.css代碼

<style type="text/css">.container{margin-top: 10px;}.outerDiv{float:left;width:100%;}/* 大于648像素一行兩個div，innerDiv兩個寬度為：(300 4 20)*2 */@media screen and (min-width: 648px){.outerDiv {width: 50%}}.innerDiv{min-width: 300px;height: 80px;border-radius: 10px;border: 2px solid #4a403f;margin: 2px 10px;background-color: #99ccff;color:#beb2b2;font-family: Arial;font-size:18px;}</style>

?

2.網頁代碼

<div class="container"><div class="outerDiv"><div class="innerDiv"></div></div><div class="outerDiv"><div class="innerDiv"></div></div><div class="outerDiv"><div class="innerDiv"></div></div><div class="outerDiv"><div class="innerDiv"></div></div><!-- 清除浮動 --><div style="clear: both"></div> </div>

?

3.總結

?容器里的outerDiv作為布局模塊，寬度由窗口大小決定拆分比例，采用流動布局。innerDiv作為布局模塊里面的真正內容，寬度不要指定100%，否則加上邊框無法計算了。模塊之間的間隔，需在innerDiv里面設置margin。

總結

以上是生活随笔為你收集整理的CSS实现响应式布局(自动拆分几列)的全部內容，希望文章能夠幫你解決所遇到的問題。

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