CSS3等分div

CSS代码

body,p{margin: 0;}
.parent{display: flex; width:1200px; margin:0 auto;}
.child{flex:1;height: 100px;}
.child + .child{margin-left: 20px;}

Html代码

    <div class="parent" style="background-color: lightgrey;">
        <div class="child" style="background-color: lightblue;">1</div>
        <div class="child" style="background-color: lightgreen;">2</div>
        <div class="child" style="background-color: lightsalmon;">3</div>
        <div class="child" style="background-color: pink;">4</div>
        <div class="child" style="background-color: pink;">5</div>
        <div class="child" style="background-color: pink;">6</div>
    </div>

时间： 2024-11-08 21:52:42

CSS3等分div的相关文章

css3控制div上下跳动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

Trick:不用table，怎么等分DIV

在SF上,有人提出一个问题:不用table,如何把Div分成3行*3列.提供了三种思路: 第一种方式 html: <div id="box"> <div> <span>1</span> <span>2</span> <span>3</span> </div> <div> <span>4</span> <span>5</span

CSS3实现DIV圆角

主要代码: <style type="text/css"> #roundcorner{ font-family: Arial; border: 2px solid #379082; border-radius: 20px; padding: 30px 30px; width: 330px; }</style>

CSS3实现的div元素水平运动指定距离

CSS3实现的div元素水平运动指定距离:本章节分享一段,它实现了利用CSS3让div元素水平运动一段距离.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</

效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text_effect.htm 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>超炫CSS3文字特效集锦DEMO演示 - 何问起</title>

CSS3使用Animation为同一个元素添加多个动画效果

本篇文章由:http://xinpure.com/css3-animation-for-the-same-element-multiple-animation-effects/ CSS3 Animation 并未提供给一个元素同时添加多个动画效果的方法,就是说一个元素,只能给它定义一个动画效果,不能同时定义. 需求说明比如说,我想实现一个这样的动画效果: 一颗星星从上往下滑落,当滑落到指定位置时开始闪烁这里就用到了两个动画效果: 1. 从上往下滑落 (单次动画) 2. 闪烁 (循环动画)

CSS3很强大

[代码] 个人感觉很强大的CSS3特效旋转效果 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>transform-style的3D效果测试</title><style>*{font-size: 14px;color: #fff; padding:0; margin:0;}#container { position: relative;

HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结

<h1>HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结</h1> <h1>HTML5,animation,keyframe,transform,transition,2D translate,3D translate,CSS3</h1> CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CS