简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
為什麼verticalalign:textbottom和verticalalign:bottom的效果一致？
P粉633309801
P粉633309801 2024-04-02 09:45:45
0
1
359

行框基線的位置受該行中所有元素的影響。 

      .short-box {
        width: 30px;
        height: 30px;
        background-color: pink;
        display: inline-block;
      }
      .box {
        background-color: bisque;
        margin-bottom: 10px;
      }
      .tall-box {
        width: 30px;
        height: 100px;
        background-color: pink;
        display: inline-block;
      }
      .text-bottom {
        vertical-align: text-bottom;
      }
      .text-top {
        vertical-align: text-top;
      }

      .bottom {
        vertical-align: bottom;
      }
      .top {
        vertical-align: top;
      }

  <body>
    <div class="box">
      x
      <span class="tall-box text-bottom"></span>
      <span class="short-box"></span>
    </div>
    <div class="box">
      x
      <span class="tall-box text-top"></span>
      <span class="short-box"></span>
    </div>
    <div class="box">
      x
      <span class="tall-box bottom"></span>
      <span class="short-box"></span>
    </div>

    <div class="box">
      x
      <span class="tall-box top"></span>
      <span class="short-box"></span>
    </div>
  </body>
</html>

為什麼第一個框和第三個框的效果是一樣的，而第二個框和第四個框的效果卻不同。垂直對齊屬性如何改變行框的基線？

P粉633309801
P粉633309801

全部回覆(1)
P粉674757114
P粉6747571142024-04-03 00:32:45 1樓

簡而言之，因為短框突出於父內容框上方，但不突出於父內容框下方。

這是添加了相關框和線條的圖像：

在每種情況下，綠色矩形顯示行框所在位置，藍色矩形顯示父內容框所在位置，紅線顯示基線所在位置。

現在我們可以看到，在情況一和情況三中，高框分別與text-bottom 和bottom 對齊，父內容框的底部和行框的底部重合。因此，每個的對齊都解析為相同的排列。

在情況二和情況四中，高框分別與text-top 和top 對齊，父內容框的頂部和行框的頂部不重合，因此它們的佈局不相同。 p>

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！