CSS实现响应式布局(自动拆分几列)

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实现响应式布局(自动拆分几列)相关推荐

css响应式布局_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
window safari 怎么进入响应式_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
在html中写响应式布局的代码,CSS实现响应式布局的方法
用CSS实现响应式布局响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中 ...
html 响应式布局怎么实现,CSS实现响应式布局
用CSS实现响应式布局响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中 ...
html页面高度设为自动,html – CSS：响应式布局中的高度自动问题
没有固定的正确高度.如果我在css中设置固定高度,则在响应式布局中,图像将不会以正确的宽高比调整大小. 主要问题是css根据src-attribute设置的图像计算自动高度和宽高比,而不是width- ...
html手机电脑自动适应模块,CSS网页响应式布局实现自动适配Pc/Pad/Phone设备
前言现在的设备很多,有PC.iPad.手机.智能手表.智能电视.如果没有响应式布局,那么电脑网页在手机或者ipad上显示,是体验非常差,操作不方便,视觉疲劳的,所以我们开发网页要做好响应式布局. i ...
html+css实现响应式布局入门
什么是响应式布局响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而 ...
css实现响应式布局
一.什么是响应式布局响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局.传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够了.响应式设计与自适应设计的区别:响应式开 ...
css @media 响应式布局
2019独角兽企业重金招聘Python工程师标准>>> 1.在 html 标签中 <link rel="stylesheet" type="te ...

CSS实现响应式布局(自动拆分几列)

CSS实现响应式布局(自动拆分几列)相关推荐

最新文章

热门文章