简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
Home > List of blog posts > 列间隙的设置方法以及等高列的实现
Blogger Information
Blog 6
fans 1
comment 0
visits 7217
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
列间隙的设置方法以及等高列的实现
努力爬坑的小白程序猿
Original
762 people have browsed it

1、列间隙的设置方法

用两种方法实现列间隙，并比较异同，下面上案例：

  1.   <style>
  2.       * {
  3.         margin: 0;
  4.         padding: 0;
  5.       }
  6.       :root {
  7.         font-size: 1.25em;
  8.       }
  9.       header h2 {
  10.         background-color: lightcoral;
  11.         height: 3em;
  12.         color: #fff;
  13.         text-align: center;
  14.       }
  15.       .left,
  16.       .main,
  17.       .right {
  18.         color: #fff;
  19.         float: left;
  20.         box-sizing: border-box;
  21.       }
  22.       /* 利用函数+em实现列间距 */
  23.       .left {
  24.         height: 30em;
  25.         background-color: lightskyblue;
  26.         width: calc(25% - 1em);
  27.         margin-right: 1em;
  28.       }
  29.       .main {
  30.         height: 30em;
  31.         background-color: rgb(240, 194, 42);
  32.         width: 50%;
  33.       }
  34.        /* 利用%实现列间距 */
  35.       .right {
  36.         height: 30em;
  37.         background-color: lightskyblue;
  38.         width: 24%;
  39.         margin-left: 1%;
  40.       }
  41.     </style>
  42.   </head>
  43.   <body>
  44.     <header>
  45.       <h2>小案例实现的列间隙</h2>
  46.     </header>
  47.     <div class="left">左侧</div>
  48.     <div class="main">主体</div>
  49.     <div class="right">右侧</div>
  50.   </body>

总结：

1、两种实现方法：1.使用百分比 2.使用百分比 + em，保证了间隙是固定的(相对于当前字号)
2、由于w3c盒子不包括padding border所以要通过box-sizing: border-box;把w3c盒子转为IE盒子。
3、添加列间距, 其实就是添加margin,可给左列加, 也能加到右列
4、使用函数calc( x + y)时, “+”操作数前面必须要有”空格”

2、等高列的实现

如何实现等高列？下面使用一个简单的小案例来演示一下：

  1.   <style>
  2.       :root {
  3.         font-size: 1.25em; /*字号为 20px*/
  4.       }
  5.       *,
  6.       ::before,
  7.       ::after {
  8.         margin: 0px; /*清除外边距*/
  9.         padding: 0px; /*清除内边距*/
  10.         box-sizing: border-box;
  11.       }
  12.       body {
  13.         background-color: #ccc;
  14.       }
  15.       header h1 {
  16.         background-color: cadetblue;
  17.         color: #fff;
  18.         text-align: center;
  19.       }
  20.       .left,
  21.       .right {
  22.         background-color: #fff;
  23.         border-radius: 0.5em;
  24.         border-top: 1px solid;
  25.         display: table-cell;
  26.         padding: 1em;
  27.       }
  28.       .left {
  29.         text-align: center;
  30.       }
  31.       .right {
  32.         width: 90%;
  33.       }
  34.       .content {
  35.         display: table;
  36.         width: 100%;
  37.         border-spacing: 1.5em;
  38.       }
  39.       .left ul li {
  40.         list-style: none;
  41.       }
  42.       .right h2 {
  43.         text-align: center;
  44.         padding-bottom: 1em;
  45.       }
  46.       .right p {
  47.         text-indent: 2em;
  48.       }
  49.       .bianju {
  50.         margin-left: -1.5em;
  51.         margin-right: -1.5em;
  52.       }
  53.     </style>
  54.   </head>
  55.   <body>
  56.     <!--头部-->
  57.     <header><h1>新闻快讯</h1></header>
  58.     <!--内容-->
  59.     <div class="bianju">
  60.       <div class="content">
  61.         <div class="left">
  62.           <ul>
  63.             <li>国内新闻</li>
  64.             <li>国外新闻</li>
  65.             <li>娱乐新闻</li>
  66.             <li>经济新闻</li>
  67.             <li>社会新闻</li>
  68.           </ul>
  69.         </div>
  70.         <div class="right">
  71.           <h2>美国大选最关键时刻 情况又变了</h2>
  72.           <p>
  73.             美国大选迎来最关键时刻，情况正变得异常复杂。截至美东时间6日晚8时，尚有内华达州（6票）、宾夕法尼亚州（20票）、佐治亚州（16票）、北卡罗来纳州（15票）和阿拉斯加州（3票）未公布最终结果。
  74.             美东时间6日凌晨，拜登在佐治亚州实现逆转，几个小时后，又在宾夕法尼亚州反超特朗普，看似大局已定，但随即又出现了新的波折。
  75.             然而，特朗普、拜登谁能最终拿下通往白宫的三个州，也各有新情况——选情胶着的内华达州，点票官自称受到人身威胁，计票工作进展迟滞；而佐治亚州、宾夕法尼亚州也已宣布重新计票。
  76.           </p>
  77.         </div>
  78.       </div>
  79.     </div>


首先，我们要使用display: table;将content这个盒子转为表格，利用border-spacing: 1.5em;来设置表格间的宽度，然后使用display:table-cell将left和right转换为单元格元素，这个时候，貌似实现了等高列的效果，但是仔细一看，左右两边因为是表格的关机，还是有间隙的，非常影响布局，这个时候我们要在content的外层再套一个盒子，设置margin-left: -1.5em;``margin-right: -1.5em;让左右各减1.5em，这时候就实现了等高列了。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：其实css学好, 也挺不容易的, 对吧
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！

  • Back top