<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. Java中的try,catch(Exception e),finally及return执行顺序

    结论: ①就算之前return,finally也会执行 ②finally的计算结果不影响之前的return值 ③finally的return值一定是最后的返回结果,因此将return放入finally ...

  2. java视频转码博客

    一下为找到的资料地址 http://lichen.blog.51cto.com/697816/162124 http://www.cnblogs.com/live365wang/archive/201 ...

  3. Effective C++ -----条款04:确定对象被使用前已被初始化

    为内置型对象进行手工初始化,因为C++不保证初始化它们. 构造函数最好使用成员初值列,而不要在构造函数本体内使用赋值操作.初值列列出的成员变量,其排列次序应该和它们在class中的声明次序相同. 为免 ...

  4. 【leetcode】Merge Two Sorted Lists(easy)

    Merge two sorted linked lists and return it as a new list. The new list should be made by splicing t ...

  5. 【编程题目】请修改 append 函数,利用这个函数实现两个非降序链表的并集

    42.请修改 append 函数,利用这个函数实现(链表):两个非降序链表的并集,1->2->3 和 2->3->5 并为 1->2->3->5另外只能输出结 ...

  6. 【matlab】随意记录

    v = -0.5:0.05:0.5; [x, y] = meshgrid(v); z = sqrt(1.0 - x.^2 - y.^2); mesh(x,y,z); 画一个球的一部分: 2. 求cel ...

  7. yii验证码不使用model在控制器中进行验证

    控制器 public function actionCheckLogin(){ if(!$this->createAction('verify_code')->validate($_POS ...

  8. java课后作业 弹出窗口求两个数的加减乘除

    //计算2个数的加减乘除 谷伟华 2015/10/6package jisuan; import javax.swing.JOptionPane; public class Jiasuan { pub ...

  9. 多线程编程4 - NSOperationQueue

    一.简介 一个NSOperation对象可以通过调用start方法来执行任务,默认是同步执行的.也可以将NSOperation添加到一个NSOperationQueue(操作队列)中去执行,而且是异步 ...

  10. How To Use Proguard in Android APP

    在Android开发完成即将发布给用户使用时,还有最后重要的一步:代码混淆,这时候,Proguard就派上用场了,大家谁也不想辛辛苦苦写的代码太容易被别人反编译过来,而Proguard就是帮我们实现这 ...