CSS实现响应式布局(自动拆分几列)
2017-12-28 11:27
218 查看
1.css代码
2.网页代码
3.总结
容器里的outerDiv作为布局模块,宽度由窗口大小决定拆分比例,采用流动布局。innerDiv作为布局模块里面的真正内容,宽度不要指定100%,否则加上边框无法计算了。模块之间的间隔,需在innerDiv里面设置margin。
<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实现每列四行加载完一列后数据自动填充到下一列
- css实现强制不换行/自动换行/强制换行
- 文字超长自动省略,以...代替,CSS实现
- CSS网页制作时实现自动换行的小技巧
- css实现强制不换行/自动换行/强制换行
- CSS实现图片超过限定尺寸自动缩放兼容IE和Firefox
- css实现li中文本超出行宽自动隐藏
- div+css+js实现鼠标略过自动切换的选项卡
- css实现强制不换行/自动换行/强制换行
- footer固定在网页底部且居中,超过一屏自动撑开(最简单的CSS实现)
- ecshop导航栏自动显示三级或多级子栏目,多级频道分类,并实现css高亮显示
- jquery+css实现点击他时变色 点击其他时自动还原
- 安装Ruby、Sass在WebStrom添加Watcher实现编辑scss文件时自动生成.map和压缩后的.css文件
- 巧用css实现强制不换行、自动换行、强制换行
- CSS实现文字自动换行
- css实现强制不换行/自动换行/强制换行
- 纯CSS实现侧边栏/分栏高度自动相等
- css 不换行 自动换行 强制换行的实现方法
- div 实现长英文字母自动换行CSS(转)
- CSS实现Table单元格自动换行或不换行