CSS 多列布局

多列是网站必不可少的布局方式。

多列布局技术主要以下3个属性为基础:

  • 用于设置列宽
  • float:用于将多个列并排
  • margin:该属性用于在列之间创建空隙

两列布局

下面的代码演示两列布局,左宽右列窄

<!DOCTYPE html>
<html>
    <head>
        <title>两列布局</title>
        <style type="text/css">
            body {
                 960px;
                color: #665544;
                margin:0 auto;}
            .column1of2 {
                float: left;
                 620px;
                margin: 10px;}
            .column2of2 {
                float: left;
                 300px;
                margin: 10px;}
        </style>
    </head>
    <body>
        <h1 style="color:#706fd3">软件开发,成就梦想</h1>
        <h2><a href="https://www.liyongzhen.com/">学编程,上利永贞网</a></h2>
        <div class="column1of2">
            <h3>第一段</h3>
            <p>Buffer Pool 缓冲池是主存储器中的一个区域,用于在访问时缓存表和索引数据。 缓冲池允许直接从内存处理常用数据,从而加快处理速度。
             在专用服务器上,通常会将最多80%的物理内存分配给缓冲池。</p>
            <p>为了提高大容量读取操作的效率,缓冲池被分成可以容纳多行的page。为了提高缓存管理的效率,缓冲池被实现为链接的page list。</p>
            <h3>第二段</h3>
            <p>Log Buffer 日志缓冲区是保存要写入磁盘上日志文件的数据的内存区域。 日志缓冲区大小由innodb_log_buffer_size变量定义。
             默认大小为16MB。 日志缓冲区的内容会定期刷新到磁盘。</p>
            <p>大型日志缓冲区使大型事务能够运行,而无需在事务提交之前将重做日志数据写入磁盘。</p>
            <p>System Tablespace InnoDB系统表空间是doublewrite缓冲区和更改缓冲区的存储区域。 系统表空间还包含在系统表空间中创建的用户
            创建表的表和索引数据。 在以前的版本中,系统表空间包含InnoDB数据字典。 在MySQL 8.0中, InnoDB将元数据存储在MySQL数据字典中。</p>
        </div>
        <div class="column2of2">
            <h3>最新文章</h3>
            <ul>
                <li>CSS 颜色术语</li>
                <li>CSS 背景颜色</li>
                <li>CSS 字体风格</li>
                <li>CSS 盒子大小</li>
                <li>CSS 边框</li>
                <li>CSS 内外边距</li>
            </ul>
        </div>
    </body>
</html>
原文地址:https://www.cnblogs.com/lsyw/p/10839072.html