1022作业 1. 实例演示列间隙的二种设置方案,并比较异同 2. 参考课堂案例,自己实现一个等高列的案例(不得抄源码) -

实例演示列间隙的三种设置方案

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
.main1, .side1, .main2, .side2{
/* 靠左浮动 */
     float: left;
        /* 转换为IE盒子，方便计算。 */
     box-sizing: border-box;
}
 /* 列间隙设置方案1 */
/* 主要内容1 */
        .main1 {
background-color: blueviolet;
border-radius: 1em;
       width: 60%;
        }
/* 侧栏内容1 */
        .side1 {
background-color: blueviolet;
border-radius: 1em;
   width: 30%;
    margin-left: 10%;
        }
 /* 列间隙设置方案2 */
 /* 主要内容2 */
.main2{
    background-color: darkblue;
border-radius: 1em;
width: 60%;
}
/* 侧栏内容2 */
.side2{
background-color: darkblue;
border-radius: 1em;
width: calc(40% - 5em);
margin-left: 5em;
}
 /* 列间隙设置方案3 */
 /* 把下列3内容个装在一个块表格table里面 */
.main3, .side3{
          box-sizing: border-box;
   display: table-cell;
       background-color:blue;
border-radius: 1em;
}
/* 左侧浮动 */
.main3{
width: 60%;
float: left;
}
/* 右侧浮动 */
.side3{
width: 30%;
float: right;
}
    </style>
</head>
<body>
    <div class="box">
<main class="main1">
    <h3>主要内容1</h3>
    </main>
    <aside class="side1">
        <h3>侧栏内容1</h3>
    </aside>
<main class="main2">
<h3>主要内容2</h3>
</main>
<aside class="side2">
    <h3>侧栏内容2    </h3>
</aside>
</div>
<main class="main3">
    <h3>主要内容3</h3>
</main>
<aside class="side3">
    <h3>侧栏内容3</h3>
</aside>
</body>
</html>

效果展示

不同视窗大小尺寸的对比

实现一个等高列的案例

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main, .side, .empty{
display: table-cell;
     /* 转换为IE盒子，方便计算。 */
        box-sizing: border-box;
        size: 100%;
        }
        .main, .side{
 background-color: darkcyan;
border-radius: 1em; 
        }
        .main{
width: 40%;
        }
     .empty{
width: 30%;
     }
        .side{
            width: 30%;
        }
    </style>
</head>
<body>
   <main class="main">
       <h3>主要内容</h3>
       <h4>这是主要内容里的文字部分，只是凑个数。</h4>
   </main>
   <div class="empty"></div>
   <aside class="side">
       <h3>侧栏内容</h3>
   </aside>
</body>
</html>