search

博客列表 >实现列间隙的两种方式和设置等高列的第一种方式

实现列间隙的两种方式和设置等高列的第一种方式

YwQ
YwQ原创
2020年10月24日 21:05:45656浏览

1022 作业

实例演示列间隙的二种设置方案,并比较异同
第一种方式
  1. <!DOCTYPE html>
  2. <html lang="">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       .box {
  9.         background-color: lightgreen;
  10.         font-size: 1.2em;
  11.       }
  12.       .box .left {
  13.         float: left;
  14.         width: 50%;
  15.         background-color: lightsalmon;
  16.         margin-right: 5%;
  17.         height: 10em;
  18.       }
  19.       .box .right {
  20.         float: left;
  21.         width: 45%;
  22.         background-color: lightsteelblue;
  23.         height: 10em;
  24.       }
  25.     </style>
  26.   </head>
  28.   <body>
  29.     <div class="box">
  30.       <div class="left">这是左边</div>
  31.       <div class="right">这是右边</div>
  32.     </div>
  33.   </body>
  34. </html>

总结：左右浮动，间隙为 5%。

第二种方式
  1. <!DOCTYPE html>
  2. <html lang="">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       .box {
  9.         background-color: lightgreen;
  10.         font-size: 1.2em;
  11.       }
  12.       .box .left {
  13.         float: left;
  14.         width: 50%;
  15.         background-color: lightsalmon;
  16.         margin-right: 1em;
  17.         height: 10em;
  18.       }
  19.       .box .right {
  20.         float: left;
  21.         width: calc(50% - 1em);
  22.         /* 注意符号前后要有空格，不然效果不实现 */
  23.         background-color: lightsteelblue;
  24.         height: 10em;
  25.       }
  26.     </style>
  27.   </head>
  29.   <body>
  30.     <div class="box">
  31.       <div class="left">这是左边</div>
  32.       <div class="right">这是右边</div>
  33.     </div>
  34.   </body>
  35. </html>

总结：左右浮动，间隙为 1em。

比较相同：

  1. 两种方式都是使用浮动来进行左右排列
  2. 宽度都是使用固定的百分比来实现
  3. 间隙都是通过 margin 来撑开的

比较不同：

  1. 第一个间隙是视口的 5%，随着视口的的变化而变化，视口变化过大会有很大差异。
  2. 第二个间隙是 1em，随着当前元素字体大小的变化而变化，不会因为视口的变化而改变。
参考课堂案例,自己实现一个等高列的案例(不得抄源码)
设置等高列的第一种方式
  1. <!DOCTYPE html>
  2. <html lang="">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       body {
  9.         margin: 0;
  10.         padding: 0;
  11.       }
  12.       .box {
  13.         background-color: mediumaquamarine;
  14.         font-size: 1.2em;
  15.         display: table;
  16.         /* 将当前的容器改成table表格 */
  17.         width: 100%;
  18.         /* 将宽度设置为100% */
  19.         /* 因为表格宽度由内容决定，所以要用100%撑开 */
  20.         border-spacing: 1em 0;
  21.         /* 给两个列之间给个列间隙 */
  22.         /* 列间隙为左右1.5em，上下0 */
  23.       }
  24.       .box .left {
  25.         display: table-cell;
  26.         /* 将两个列都转为单元格元素 */
  27.         background-color: lightsalmon;
  28.       }
  29.       .box .right {
  30.         display: table-cell;
  31.         /* 将列转为单元格元素 */
  32.         background-color: lightsteelblue;
  33.       }
  34.       /* 等高列效果实现 */
  35.       /* 但是现在还存在一个问题：表格除了中间有间隙之外，最左侧和最右侧也存在间隙 */
  36.       /* 那么需要通过给box容器外面再套一个容器*/
  37.       .big {
  38.         margin: 0 -1em;
  39.         /* 给一个上下为0，左右为-1em的外边距 */
  40.       }
  41.       /* 通过margin给左右两边的间隙拉回到 0 */
  42.     </style>
  43.   </head>
  45.   <body>
  46.     <div class="big">
  47.       <div class="box">
  48.         <div class="left">
  49.           这是左边<br />这是左边<br />这是左边<br />
  50.           这是左边<br />这是左边<br />这是左边<br />
  51.         </div>
  52.         <div class="right">这是右边</div>
  53.       </div>
  54.     </div>
  55.   </body>
  56. </html>
上一条：em,rem,px的使用和简单手机页面布局下一条：em的原理与实现
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多