盒模型实现多栏布局

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. BUAA-OO第二单元小结

    一.设计策略 三次作业中,由于前两次作业都只有一部电梯,因此我的线程只有两个,一个等待队列输入进程,以及一个电梯运行进程.等待队列输入进程实现十分简单,只需要根据输入把request添加到等待队列即可 ...

  2. webpack学习笔记(六)优化

    1 loader 使用include,缩小编译范围: rules: [{ test: /\.js$/, include: path.resolve(__dirname, '../src'), use: ...

  3. 雨燕apply项目总结

    1,数据库默认值的问题 数据库尽量是非空的,然后不设置默认值,默认值由程序来设计 因为如果程序中设计有错误,应该是空值的地方没有没有处理掉,那插入数据库的时候应该报错,但如果你设置了默认值,排查将会变 ...

  4. Windows7 Autoconfiguration IPv4 Address 导致无法上网

    Windows7 Autoconfiguration IPv4 Address 导致无法上 (2010-03-30 16:44:57) 转载▼ 标签: 杂谈 分类: 电脑软件问题 Windows7 A ...

  5. 【SQLServer】附加数据库失败

    一个参考:https://blog.csdn.net/zjx86320/article/details/25562361 如果类似Administrator.Everyone等都依照网上的权限改过之后 ...

  6. update_engine-整体结构(三)

    在update_engine-整体结构(二)中分析到了Action,那么我们接着继续分析. 首先来看一下BuildUpdateActons(...)这个方法. src/system/update_en ...

  7. flutter mac 下安装

  8. 第一节 Python基础之数据类型(整型,布尔值,字符串)

    数据类型是每一种语言的基础,就比如说一支笔,它的墨有可能是红色,有可能是黑色,也有可能是黄色等等,这不同的颜色就会被人用在不同的场景.Python中的数据类型也是一样,比如说我们要描述一个人的年龄:小 ...

  9. TIDB 备忘

    ALTER TABLE TableName MODIFY COLUMN -- 最后更新时间,自动赋值 dtModify ) NULL DEFAULT now() ON UPDATE now();

  10. 多个ROS工作空间常见的问题

    1. 在/home/user_name/.bashrc文件中写入多个工作空间的环境变量,这样会导致环境变量之间相互覆盖.最常见的问题就是找不到工作空间中某个launch文件.节点.rviz插件等. 解 ...