参差布局不成功方法二(display:inline-block)

最新推荐文章于 2025-04-30 09:52:29 发布

原创最新推荐文章于 2025-04-30 09:52:29 发布 · 498 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

前端专栏收录该内容

12 篇文章

订阅专栏

本文探讨了使用CSS的display:inline-block属性进行网页布局的特点。重点介绍了inline-block如何影响元素的排列方式，以及它如何使得元素展现出既类似内联元素又保持块级元素特性的行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

     <style type="text/css">
     .pagewrap{
          position: relative;
          width: 100%;
          padding: 0px;
          margin: 0px;
     }
     *{
          padding: 0px;
          margin: 0px;
     }
     #blue{
          background-color: blue;
     }

     .item, .promotions{
          width: 236px;
     }
     .righter{
          height: 670px;
          background-color: transparent;
     }
     .image{
          background-color:yellow;
          height: 400px;
          position: absolute;
     }
     .read{
          background-color: red;
          height: 200px;
          position: absolute;
          top: 436px;
     }
     .item{
          background-color: green;
          display: inline-block;
          margin: 13px;
          vertical-align: top;
     }
     .one{
          height: 300px;
     }
     .two{
          height: 900px;
     }
     .three{
          height: 400px;
     }
     .four{
          height: 500px;
     }
     .five{
          height: 400px;
     }
     .six{
          height: 300px;
     }
     .seven{
          height: 300px;
     }
     .eight{
          height: 500px;
     }
     .nine{
          height: 400px
     }
     .ten{
          height: 400px;
     }

     </style>
</head>

<body>
     <div class="pagewrap">
          <div class="one item"></div>
          <div class="two item"></div>
          <div class="three item"></div>
          <div class="four item"></div>
          <div class="righter item">
               <div class="image promotions"></div>
              <div class="read promotions"></div>
          </div>
          <div class="five item" id="blue"></div>
          <div class="six item"></div>
          <div class="seven item"></div>
          <div class="eight item"></div>
          <div class="nine item"></div>
          <div class="ten item"></div>
     </div>
</body>
</html>

总结：用display:inline-block布置网格状布局时，呈现出组团的特性，每一行的元素组合成一个inline-box，此box是一个矩形体块，高度为此行中最高元素的高度。每一行呈现出块状特性，其内部空隙互相之间不能侵犯（估计设计命令的时候就根本不想让元素能够错落布置，最初使用应该是希望能够呈现出类似于表格的形态，每一行的高度都是相同的，而且inline-block可以设置高度和宽度），网上搜到接受说inline-block指的是“可以包含 block boxes的 inline box元素”，我理解即为将块状元素作为内联元素布置，但元素自身仍保留块状元素盒模型的特性，相互独立。不能形成参差布局。