Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html中的两种列间隙方法以及table型的等高列
Blogger Information
Blog 13
fans 0
comment 0
visits 10409
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html中的两种列间隙方法以及table型的等高列
微光
Original
1006 people have browsed it

1、实现列间隙的方法

在html代码中，想要实现列间隙，无非就是设置盒子的margin值，在这里有两种可以实现的方法，我们举例演示。

1、直接用百分比来进行设置

  1. <head>
  2.     <meta charset="utf-8" />
  3.     <title>123</title>
  4.     <style>
  5.       * {
  6.         margin: 0;
  7.         padding: 0;
  8.         box-sizing: inherit;
  9.       }
  10.       :root,
  11.       ::after,
  12.       ::before {
  13.         background-color: #eee;
  14.         box-sizing: border-box;
  15.       }
  16.       .box1,
  17.       .box2 {
  18.         background-color: #cccccc;
  19.         border-radius: 1em;
  20.         padding: 1em;
  21.         float: left;
  22.       }
  23.       .box1 {
  24.         width: 70%;
  25.       }
  26.       .box2 {
  27.         width: 29%;
  28.         margin-left: 1%;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <div class="box3">
  34.       <div class="continal">
  35.         <div class="box1"></div>
  36.         <div class="box2"></div>
  37.       </div>
  38.     </div>
  39.   </body>

2、列间隙用em来设置

  1. <head>
  2.     <meta charset="utf-8" />
  3.     <title>123</title>
  4.     <style>
  5.       * {
  6.         margin: 0;
  7.         padding: 0;
  8.         box-sizing: inherit;
  9.       }
  10.       :root,
  11.       ::after,
  12.       ::before {
  13.         background-color: #eee;
  14.         box-sizing: border-box;
  15.       }
  16.       .box1,
  17.       .box2 {
  18.         background-color: #cccccc;
  19.         border-radius: 1em;
  20.         padding: 1em;
  21.         float: left;
  22.       }
  23.       .box1 {
  24.         width: 70%;
  25.       }
  26.       .box2 {
  27.         width: calc(30% - 1em);
  28.         margin-left: 1em;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <div class="box3">
  34.       <div class="continal">
  35.         <div class="box1"></div>
  36.         <div class="box2"></div>
  37.       </div>
  38.     </div>
  39.   </body>

2、用table表格的形式来实现一个等高列

想用表格的形式实现等高列，首先我们需要将页面的布局方式改成表格形式，之后才能进行等高的操作。最后为了页面的美观，我们需要在表格的外部放一个盒子把它包起来，通过设置盒子的margin，使表格和页面的其他部分等宽。

实例演示：

  1.   <head>
  2.     <meta charset="utf-8" />
  3.     <title>123</title>
  4.     <style>
  5.       * {
  6.         margin: 0;
  7.         padding: 0;
  8.         box-sizing: inherit;
  9.       }
  10.       :root,
  11.       ::after,
  12.       ::before {
  13.         background-color: #eee;
  14.         box-sizing: border-box;
  15.       }
  16.       header {
  17.         background-color: #0072b0;
  18.         color: #ffffff;
  19.         text-align: center;
  20.         border: 2px solid;
  21.         border-radius: 0.5em;
  22.       }
  23.       .continal {
  24.         display: table;
  25.         width: 100%;
  26.         border-spacing: 1.5em 0;
  27.       }
  28.       .box1,
  29.       .box2 {
  30.         background-color: #cccccc;
  31.         border-radius: 1em;
  32.         padding: 1em;
  33.         margin-top: 1em;
  34.         display: table-cell;
  35.       }
  36.       .box1 {
  37.         width: 70%;
  38.         height: 30vh;
  39.       }
  40.       .box2 {
  41.         width: calc(30% - 1em);
  42.         margin-left: 1em;
  43.       }
  45.       .box3 {
  46.         margin-left: -1.5em;
  47.         margin-right: -1.5em;
  48.       }
  49.     </style>
  50.   </head>
  51.   <body>
  52.     <header>
  53.       <h1>等高列</h1>
  54.     </header>
  55.     <div class="box3">
  56.       <div class="continal">
  57.         <div class="box1"></div>
  58.         <div class="box2"></div>
  59.       </div>
  60.     </div>
  61.   </body>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：对于flex,grid来说, 等高列本就是默认状态,而之前却为了实现它, 好难
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post