栅格布局的两种简单的实现方式

使用float：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <style>
      section
      {
        border: solid 1px;
      }
      section section
      {
        float: left;
        margin-left: 10px;
        margin-top: 10px;
        text-align: center;
        width: 200px;
        border-radius: 20px;
        height: 200px;
      }
      .parent
      {
        height: 440px;
        width: 660px;
      }
      .parent section:first-child
      {
        height: 410px;
      }
  </style>
</head>
<body>
  <section class="parent">
    <section>A</section>
    <section>B</section>
    <section>C</section>
    <section>D</section>
    <section>E</section>
  </section>

</body>
</html>

使用display：flex（这个css3属性仅谷歌和火狐支持）

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <style>
      section
      {
        border: solid 1px;
      }
      section section
      {
        margin-left: 10px;
        margin-top: 10px;
        text-align: center;
        width: 200px;
        border-radius: 20px;
        height: 200px;
      }
      .parent
      {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 440px;
        width: 660px;
      }
      .parent section:first-child
      {
        height: 410px;
      }
  </style>
</head>
<body>
  <section class="parent">
    <section>A</section>
    <section>B</section>
    <section>C</section>
    <section>D</section>
    <section>E</section>
  </section>

</body>
</html>

实现效果如图所示：

当然使用table和负边距也是可以实现的，有时间补上:-D

时间： 2024-07-29 05:04:28

栅格布局的两种简单的实现方式的相关文章

HTML5的两种简单的存储方式

1.Application Cache HTML5引入应用缓存,意味着web应用可以进行缓存,即使在没有网络的情况下也能使用. application cache有三个特点离线浏览已缓存的资源加载速度更快减少服务器负载,浏览器将只从服务器下载更新过或更改过的资源使用方法就是在 html标签中添加一个manifest属性每个指定了 manifest 的页面在用户对其访问时都会被缓存.如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面).

SQL两种简单分页查询方式

以前我们或许都用过了linq的skip and take方式进行分页查询,但是很少自己写sql的分页查询,因为大多数时候,我们都是在调用别人的方法. 最近看到一个文档,感觉方法里面实现的分页查询进入数据库调用的时候,实际最底层调用的还是SQL的分页查询,例如,我们用linq写个分页查询,转成sql表达式后发现: 实际调用的时候,才发现SQL底层是这样进行分页的. 下面,本文主要是介绍两种SQL的分页查询. 一,TOP方式 ----第一种分页查询方式:TOP方式 declare @page int

java 程序执行输出有两种简单方式

java 程序执行输出有两种简单方式: 1. System.out.println("需要输出的内容"): 该方法可参看运行一个简单的Java程序结果图: 2. System.out.print("需要输出的内容"): 1 public class HelloWorld 2 { 3 //Java程序的入口方法,程序将从这里开始运行 4 public static void main(String[] args) 5 { 6 //向控制台打印一条语句 7 Syste

两种简单实现菜单高亮显示的JS类(转载)

两种简单实现菜单高亮显示的JS类近期在写一个博客管理后台的前端,涉及在同一页面两种高亮显示当前菜单的需求.记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web前端来说,是比较常用到的效果,正好此次又要用到,特地整理出我所写的两种高亮类. 其实思路很简单,第一种方法是通过遍历链接组的href值,通过indexOf判断href值是否被包含在浏览器当前url值中.此方法有一定局限,比如对于iframe内的菜单是不能这样判断的; 第二种方法适用范围更广一样,实现思路

统计学习基础（第二版）两种简单的预测方法：最小二乘和最近邻

2.3两种简单的预测方法:最小二乘和最近邻在本节中我们详细讨论两种简单但有效的预测方法,使用最小二乘线性模型拟合和k最近邻预测.线性模型对结构做了大量的假设,但是可能会产生不准确的预测.K-最近邻对结构做了适当的假设,所以预测通常是精确但不稳定的. 2.3.1线性模型和最小二乘在过去的30年中,线性模型一直是统计学的支柱,而且现在依然是我们最重要的工具之一.给定一个输入向量,通过以下模型来预测Y: 其中是截距,在机器学习中又叫做偏置,通常在X中包含一个常数变量1,在系数向量中包含是方便的.这

Adnroid 两种下拉刷新方式的实现 sina刷新 gmail刷新

sina刷新这种下拉刷新的方式是比较简单的.上个图: 这种刷新方式的思路是这样的: 首先是需要一个HeaderVIew也就是刷新时头部所显示出来的数据.这个view的布局随你,长啥样自己定夺. 其他不是特别重要,重要的是用户触摸事件的捕捉,看到github上的大神的一些方法是比较正规的,我就自己用自己的方法尝试,主要是捕捉到用户的点击事件来计算用户所触摸到的位置然后来更新头部布局的位置. 这个重要的代码贴出来: case MotionEvent.ACTION_MOVE: currentY =

转：Selenium2.0介绍——WebDriver两种驱动浏览器的方式

如果之前熟悉Selenium RC,理解了Selenium RC是如何工作的,那么,当第一次接触Selenium WebDriver的时候,看到WebDriver居然可以不需要指定远端服务器的IP地址和端口号的,一定会惊讶的. 事实上,WebDriver有两种方式“驱动”浏览器的方式.1. Selenium Server:和Selenium RC一样的,通过指定远端服务器IP地址和端口号,由这个远端服务器来驱动浏览器.2. 直接调用:无须指定任何服务器IP地址和端口号.直接使用本地的浏览器(只要

两种访问接口的方式(get和post)

跨机器.跨语言的远程访问形式一共有三种:scoket发送数据包.http发送请求.rmi远程连接: http发送请求方式:分为post和get两种方式 importjava.io.IOException; importjava.io.InputStream; import java.util.Map; importjava.util.concurrent.atomic.AtomicInteger; importorg.apache.commons.httpclient.HttpClient; i

javascript两种声明函数的方式的一次深入解析

声明函数的方式 javascript有两种声明函数的方式,一个是函数表达式定义函数,也就是我们说的匿名函数方式,一个是函数语句定义函数,下面看代码: /*方式一*/ var FUNCTION_NAME = function() { /* FUNCTION_BODY */}; /*方式二*/ function FUNCTION_NAME () { /* FUNCTION_BODY */}; 区别一方式一的声明方式是先声明后使用方式二的声明方式可以先调用,后声明 /*方式一: *先声明后使用 *