<div class="div1">
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
</div>
.div1 .box {
border: 1px solid #ccc;
padding: 10px;
display: -moz-box;
display: -webkit-box;
display: box;
}
.div1 .box>div {
border: 1px solid #f36;
height: 100px;
text-align: center;
-webkit-box-flex:;
-moz-box-flex:;
-ms-flex:;
-o-box-flex:;
box-flex:;
}

我用flex发现有些安卓手机不好使用,所以把没有测出BUG的box上传了

DIV伸缩盒子box的更多相关文章

  1. HTML+CSS基础 border css属性 Div块 盒子

    border  css属性 边框颜色 border-color:red/#ffffff/rgb()默认为黑色 边框样式 border-style:solid (实线) dashed (虚线).默认为n ...

  2. 三栏布局,div左右盒子是定宽,中间是自适应

    用弹性布局flex: 给父盒子加个display:flex; 给中间盒子设flex=1; /* 弹性盒子布局*/ .wrap{ width: 100%; height: 90px; display: ...

  3. div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出

    今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这 ...

  4. DIV + CSS 盒子模型

    盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型.他们对盒子模型的解释各不相同, 先来看看我们熟悉的标准盒子模型: 图片看不清楚?请点击这里查看原图(大图). 从上图可以看到标准 W3C ...

  5. h5-携程页面小案例-伸缩盒子

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 伸缩盒子模型,旧的伸缩盒子模型。浏览器内核、css继承属性

  7. flex 伸缩盒子

    flex 的学习地址: http://caibaojian.com/demo/flexbox/align-content.html

  8. 前端 HTML body标签相关内容 常用标签 盒子标签 div

    盒子标签 div <div>可定义文档的分区 division的缩写 译:区 <div> 标签可以把文档分割为独立的.将他们进行分区 div在浏览器中,默认是不会增加任何的效果 ...

  9. css弹性盒子学习

    css3弹性盒子是一种布局方式,在适应不同的屏幕大小的时候,能够确保元素拥有更恰当的排布行为.它只是视觉呈现上的,即显示顺序适应显示空间,与源代码无关,源代码顺序不受影响. 定义一个弹性盒子: 在cs ...

随机推荐

  1. 基于 REST 的 Web 服务:基础

    代表性状态传输(Representational State Transfer,REST)在 Web 领域已经得到了广泛的接受,是基于 SOAP 和 Web 服务描述语言(Web Services D ...

  2. Java多线程Socket在控制台输出的多人聊天室编程

    服务器端代码 import java.io.IOException; import java.net.ServerSocket; import java.net.Socket; import java ...

  3. android 和iOS的view上的区别

    android上的view的类叫View, 以下是它的class overview, This class represents the basic building block for user i ...

  4. Python: 安装BeautifulSoup4

    python3.4.3 安装BeautifulSoup4: 使用pip install 安装: 在命令行cmd之后输入,pip install BeautifulSoup4 BeautifulSoup ...

  5. Valentine's Day Round 1001.Ferries Wheel(hdu 5174)解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5174 题目意思:给出 n 个人坐的缆车值,假设有 k 个缆车,缆车值 A[i] 需要满足:A[i−1] ...

  6. eclipse远程调试Tomcat方法[转]

    转载自:http://blog.csdn.net/afgasdg/article/details/9236877 1.Linux中配置tomcat在catalina.sh中添加如下CATALINA_O ...

  7. ListView异步加载图片,完美实现图文混排

    昨天参加一个面试,面试官让当场写一个类似于新闻列表的页面,文本数据和图片都从网络上获取,想起我还没写过ListView异步加载图片并实现图文混排效果的文章,so,今天就来写一下,介绍一下经验. Lis ...

  8. 电脑不能浏览网页but能登录qq,解决方案总结

    电脑能登录qq,但是不能浏览网页,解决方法总结 [注]:仅供参考,属个人经验 今天早晨起来,电脑突然只能登录qq,不能上网了,从来没有遇到这种问题的我开始各种百度方法,各种尝试,最终成功解决了问题 首 ...

  9. August 24th 2016 Week 35th Wednesday

    Storms make trees take deeper roots. 暴风雨能使大树的根扎得更深. If the trees already have deep roots, then the s ...

  10. java Unicode、ISO-8859-1、GBK、UTF-8编码转换深入浅出

    参考文献:搞懂ASCII, ISO8859-1, ANSI和Unicode Unicode百度文献 ISO-8859-1百度文献 注: 1.utf-8虽然是国际编码,对不同范围的字符使用不同长度的编码 ...