居中分栏flex完美的解决方案

盒模型实现多栏布局

疯狂软件开班信息

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>

posted on 2019-04-26 21:19 qqhfeng16 阅读(150) 评论(0) 编辑收藏举报