盒模型实现多栏布局

div {
border: 1px solid #aaf;
/* 设置HTML组件的大小包括边框 */
box-sizing: border-box;
padding: 5px;
}

-->

疯狂软件开班信息

  • 2011年11月10日 已满已开班
  • 2011年12月02日 爆满已开班
  • 2012年02月08日 已满已开班

疯狂软件介绍

疯狂Java品牌专注高级软件编程，以“十年磨一剑”的心态打造全国最强（不是之一）疯狂Java学习体系：包括疯狂Java体系原创图书，疯狂Java学习路线图，这些深厚的知识沉淀已被大量高校、培训机构奉为经典。
    疯狂Java怀抱“软件强国”的理想，立志以务实的技术来改变中国的软件教育。经过八年沉淀，疯狂Java强势回归。疯狂Java创始人李刚，携疯狂Java精英讲师团队肖文吉、黄勇等老师将带给广大学习者“非一般”的疯狂。

公司动态

  • 《疯狂Java讲义》(第3版)上市
  • 泰豪电网软件公司来校召开现场招聘会
  • 疯狂学子赴武汉光谷软件园入职
  • 新华南方来校现场招聘

<!DOCTYPE html>

<html>

<head>

    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title> 盒模型实现多栏布局 </title>

    <style type="text/css">

        div#container {

            display: flex;

            width: 960px;

            text-align: left;

            /* 居中 这是非常完美的解决方案*/

            margin-left: auto;

            margin-right: auto;

        }

        #container>div {

            border: 1px solid #aaf;

            /* 设置HTML组件的大小包括边框 */

            box-sizing: border-box;

            padding: 5px;

        }

    </style>

</head>

<body>

    <div id="container">

        <div style="width:220px">

            <h2>疯狂软件开班信息</h2>

            <ul>

                <li>2011年11月10日&nbsp;已满已开班</li>

                <li>2011年12月02日&nbsp;爆满已开班</li>

                <li>2012年02月08日&nbsp;已满已开班</li>

            </ul>

        </div>

        <div style="width:500px;">

            <h2>疯狂软件介绍</h2>

            &nbsp;&nbsp;&nbsp;&nbsp;疯狂Java品牌专注高级软件编程，以“十年磨一剑”的心态打造全国最强（不是之一）疯狂Java学习体系：包括疯狂Java体系原创图书，疯狂Java学习路线图，这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/> &nbsp;&nbsp;&nbsp;&nbsp;疯狂Java怀抱“软件强国”的理想，立志以务实的技术来改变中国的软件教育。经过八年沉淀，疯狂Java强势回归。疯狂Java创始人李刚，携疯狂Java精英讲师团队肖文吉、黄勇等老师将带给广大学习者“非一般”的疯狂。

        </div>

        <div style="width:240px">

            <h2>公司动态</h2>

            <ul>

                <li>《疯狂Java讲义》(第3版)上市</li>

                <li>泰豪电网软件公司来校召开现场招聘会</li>

                <li>疯狂学子赴武汉光谷软件园入职</li>

                <li>新华南方来校现场招聘</li>

            </ul>

        </div>

    </div>

</body>

</html>

居中分栏flex完美的解决方案的更多相关文章

  1. columns分栏与flex弹性盒模型

    columns  分栏 值:column-width:设置每列的宽度        column-count:设置列数   例:columns{200px 3}   列数和宽度固定        co ...

  2. iOS系统中导航栏的转场解决方案与最佳实践

    背景 目前,开源社区和业界内已经存在一些 iOS 导航栏转场的解决方案,但对于历史包袱沉重的美团 App 而言,这些解决方案并不完美.有的方案不能满足复杂的页面跳转场景,有的方案迁移成本较大,为此我们 ...

  3. CSS实现各类分栏布局

    在CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项(absolute .static.relative和fixed)中的绝对定位(absolute positioning),它可以 ...

  4. css 完美垂直居中解决方案兼容ie8以上等其他浏览器

    css 完美垂直居中解决方案兼容ie8以上等其他浏览器 <pre><!DOCTYPE html><html><head> <title>DI ...

  5. CSS3 column 分栏

     column的布局形式还没有使用过,后续的bug和解决方案有待检验. column column-count:number: 设置内容分为多少栏显示 column-width:长度单位:设置每一栏的 ...

  6. efcore分表下"完美"实现

    ShardingCore 如何呈现"完美"分表 这篇文章是我针对efcore的分表的简单介绍,如果您有以下需求那么可以自己选择是否使用本框架,本框架将一直持续更新下去,并且免费开源 ...

  7. efcore在Saas系统下多租户零脚本分表分库读写分离解决方案

    efcore在Saas系统下多租户零脚本分表分库读写分离解决方案 ## 介绍 本文ShardinfCore版本x.6.0.20+ 本期主角: - [`ShardingCore`](https://gi ...

  8. CSS3-column分栏

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

  9. ActiveReports 报表应用教程 (4)---分栏报表

    在 ActiveReports 中可以实现分栏报表布局样式,可以设置横向分栏.纵向分栏,同时进行分栏和分组设置,统计分栏分组的小计.合计等.在商业报表系统中常见的分栏报表有商品标签.员工工卡.条码打印 ...

随机推荐

  1. html基础学习笔记1

    <!DOCTYPE html> 声明为 HTML5 文档  <html> 元素是 HTML 页面的根元素 <head> 元素包含了文档的元(meta)数据,如 &l ...

  2. sql注入-推断是否存在SQL注入-加法和减法

    这里我们需要区分一下数字型和字符串型: 数字型:不需要使用单引号来表示 其他类型:使用单引号来表示 综合上述,我们可以发现我们的例子是数字型的,这样我们就可以使用加法和减法来判断了. 加法,我们在参数 ...

  3. POJ1037 A decorative fence

    题意 Language:Default A decorative fence Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 84 ...

  4. linux下目录简介——/proc

    1. /proc目录Linux 内核提供了一种通过 /proc 文件系统,在运行时访问内核内部数据结构.改变内核设置的机制.proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间.它以文 ...

  5. 【MatConvNet代码解析】 vl_nnsoftmaxloss

    背景知识:http://deeplearning.stanford.edu/wiki/index.php/Softmax%E5%9B%9E%E5%BD%92 假设softmax层的输入(softmax ...

  6. 浏览器端使用javascript调用腾讯翻译api

    最近在学习的小玩意,发现腾讯的文档十分坑爹,里面有很多错误的指示. 不过腾讯的机器翻译还是很牛的,我觉得翻译水准比谷歌好很多. 腾讯的机器翻译貌似在试用阶段,不收费,用QQ或微信登录即可申请使用. 首 ...

  7. JavaScript代码优化

    1.if else 语句中变量赋值为布尔值 if (a > b) { status = true; } else { status = false; } // 可以简化为 status = a ...

  8. My Demos

    Some elementary algorithms on discrete differential geometry http://www.cnblogs.com/yaoyansi/p/56350 ...

  9. nginx1.14.0版本高可用——keepalived双机热备

    nginx不支持主从,所以我们需要使用keepalive支持高可用. keepalived重要知识点 在局域网内,每个主机上各安装一个keepalived,注意关闭防火墙firewalld,然后设定一 ...

  10. 配置中心Nacos

    Nacos 是阿里巴巴2018年7月份开源的项目,如其名, Naming Configuration Service ,专注于服务发现和配置管理领域. Nacos 是什么?上面已经大概介绍了,更多详细 ...