一个全等四宫格实现的多种方法

方法一：用float方法实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>一个全等四宫格的实现</title>
        <style>
            .parent{
                background-color:#fff;
                width: 500px;
                height: 400px;
                margin-left: -10px;
                margin-top: -10px;
            }
            .child{
                float: left;
                width: 50%;
                height: 50%;
                padding-left: 10px;
                padding-top: 10px;
                box-sizing: border-box;
                background-clip: content-box;
                background-color: #009899;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </body>
</html>

三法并用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*方法1：float*/
        .container1{width:400px;height:400px;border:1px solid red;margin-top:-10px;margin-left:-10px;}
        .column1{float:left;background: blue;width:50%;height:50%;padding-left: 10px;
                padding-top:10px;box-sizing:border-box; background-clip:content-box;}

        /*方法2：table*/
        .container-fix{margin-left:-10px; margin-top:-10px;}
        .container2{display: table;width:400px; height:400px; table-layout: fixed;}
        .row2{display: table-row;}
        .column2{display: table-cell;background: blue;width:50%; height:50%;
            padding-left: 10px; padding-top: 10px;  background-clip:content-box;}
        p{height:100%;}

        /*方法3:flex*/
        .container3{width:400px; height:400px;}
        .row3{display: flex; height:50%;}
        .column3{flex:1; background: blue;margin-left: 10px;margin-top: 10px;
        }

    </style>
</head>
<body>
    <div class="container1">
        <div class="column1"></div>
        <div class="column1"></div>
        <div class="column1"></div>
        <div class="column1"></div>
    </div>

    <div class="container-fix">
        <div class="container2">
            <div class="row2">
                <div class="column2"><p></p></div>
                <div class="column2"><p></p></div>
            </div>
            <div class="row2">
                <div class="column2"><p></p></div>
                <div class="column2"><p></p></div>
            </div>
        </div>
    </div>

    <div class="container3">
        <div class="row3">
        <div class="column3"><p></p></div>
        <div class="column3"><p></p></div>
        </div>
        <div class="row3">
        <div class="column3"><p></p></div>
        <div class="column3"><p></p></div>
        </div>
    </div>
</body>
</html>

时间： 2024-12-10 18:02:53

一个全等四宫格实现的多种方法的相关文章

四宫格div

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .main01 div{ float: left; margin-top: 10px; margin-left: 10px; line-height: 190px; text-align: cente

一.负边距与浮动布局 1.1.负边距所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &

一个iOS图片选择器的DEMO(实现图片添加，宫格排列，图片长按删除，以及图片替换等功能)

在开发中,经常用到选择多张图片进行上传或作其他处理等等,以下DEMO满足了此功能中的大部分功能,可直接使用到项目中. 主要功能如下: 1,图片九宫格排列(可自动设置) 2,图片长按抖动(仿苹果软件删除时,图标抖动效果),可进入删除状态,再次单击进入普通状态 3,图片设置最大上限,加号按钮自动隐藏 4,已选图片可单击进行重新选择 5,无需代理,直接调用对应属性就可获取所有图片,并与显示顺序保持一致效果图如下: 1 // 2 // SZAddImage.h 3 // addImage 4 // 5

9宫格拼图

选张图片做成9宫格拼图今天要学习一个拼图项目. 目标是传入一张图片,然后将它分成9份,去掉一份,鼠标点击进行拼图. 源文件结构很简单第一步.新建项目这一步没什么好说的,新建一个项目就跟源文件结构一样了第二步.页面布局(.xaml文件) 看下源文件控件有 DockPanel Grid Button三个然后设置了Grid有三列和三行.DockPannel暂时不知道有什么用,所以我先不忙加.然后我就报错了原来 xaml是用的xml格式.button外面没有双标签包围,不能识别,所以报错.所

九宫格问题、16宫格

九宫格(Lo Shu Square)问题将1到9的数字按照一定方式填入九宫格内.使得每一列.每一行以及两条对角线上的值都相等. 全排列(递归) 首先,用枚举法,生成各种(3, 3)的二维数组: def perm(li): """递归实现列表的全排列如果输入是[1],那么返回[[li],]表示有一种排列如果输入是[1, 2],期望的返回的是[[1, 2], [2, 1]],这是要之后的递归实现的 """ if len(li) <= 1:

Python3网络爬虫实战-45、微博宫格验证码的识别

本节我们来介绍一下新浪微博宫格验证码的识别,此验证码是一种新型交互式验证码,每个宫格之间会有一条指示连线,指示了我们应该的滑动轨迹,我们需要按照滑动轨迹依次从起始宫格一直滑动到终止宫格才可以完成验证,如图 8-24 所示: 图 8-24 验证码示例鼠标滑动后的轨迹会以×××的连线来标识,如图 8-25 所示: 图 8-25 滑动过程我们可以访问新浪微博移动版登录页面就可以看到如上验证码,链接为:https://passport.weibo.cn/signin/login,当然也不是每次都会出

web前端入门到实战：css如何实现n宫格布局?

常见应用场景现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在. 带边框, 常用在"功能导航"页面无边框, 常用在首页分类设计目标在scss环境下, 通过mixin实现n宫格, 并且可以支持"有无边框"和"每个格是否正方形": @include grid(3, 3, true); // 3 x 3, 有边框, 且每个格为正方形 @include grid(2, 5, false, false); // 2 x 5,

安卓项目开发实战（2）--星座展示12宫格

好多日子没有写安卓了,今天继续我未完成的安卓项目.今天主要实现星座展示的12宫格效果. 1.星座图片找好12星座的图片,参见工程代码下面的res/drawable目录 2.星座枚举类建立这个枚举类是很有必要的,可以使我们的代码更加清晰,同时避免了魔法数字的情况. 枚举类的代码如下: package com.liuc.constatntEnum; import com.liuc.R; /** * 星座枚举 * * @author Administrator * */ public enum

Sql Server函数全解<四>日期和时间函数

原文:Sql Server函数全解<四>日期和时间函数日期和时间函数主要用来处理日期和时间值,本篇主要介绍各种日期和时间函数的功能和用法,一般的日期函数除了使用date类型的参数外,也可以使用datetime类型的参数,但会忽略这些值的时间部分.相同的,以time类型值为参数的函数,可以接受datetime类型的参数,但会忽略日期部分. 1.获取系统当前日期的函数getDate(); getDate()函数用于返回当前数据库系统的日期和时间,返回值的类型为datetime.[例]sel