Das Hinzufügen von Inhalten zum Div wird sinken

wiederkehrend

Es gibt ein solches Layout.

Im oberen Teil befinden sich drei Divs, es wird keine Positionierung oder Floating verwendet. Nach dem Anpassen des Layouts ist die Anzeige normal.

    <!-- 配置部分 -->
    <div>
      <!-- 展示部分 -->
      <div class="configPart">
        <div class="showPart">
          <div class="showSelectDiv">
            <!-- <span>F&Q</span> -->
          </div>
          <svg
            t="1646033760309"
            class="icon"
            viewBox="0 0 2560 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5116"
            width="128"
            height="128"
          >
            <path
              d="M2269.44 597.333333H0V426.666667h2269.44L1962.666667 107.690667 2067.370667 0l440.832 458.410667 51.797333 53.248-0.256 0.341333 0.256 0.341333-51.797333 53.248L2067.370667 1024 1962.666667 916.309333 2269.44 597.333333z"
              fill="#cdcdcd"
              p-id="5117"
            ></path>
          </svg>
          <div class="showSelectDiv"></div>
          <svg
            t="1646033760309"
            class="icon"
            viewBox="0 0 2560 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5116"
            width="128"
            height="128"
          >
            <path
              d="M2269.44 597.333333H0V426.666667h2269.44L1962.666667 107.690667 2067.370667 0l440.832 458.410667 51.797333 53.248-0.256 0.341333 0.256 0.341333-51.797333 53.248L2067.370667 1024 1962.666667 916.309333 2269.44 597.333333z"
              fill="#cdcdcd"
              p-id="5117"
            ></path>
          </svg>
          <div class="showSelectDiv"></div>
        </div>
        <!-- 按钮部分 -->
        <div class="btnDiv">
          <el-button type="primary" round>F&Q</el-button>
          <el-button type="primary" round>KG</el-button>
          <el-button type="primary" round>TASK</el-button>
        </div>
      </div>
    </div>

.configPart {
    
    
  padding: 20px 10px;
  margin: 0 auto;
  width: 1000px;
  border: 1px solid #ccc;
  .showPart {
    
    
    height: 128px;

    .showSelectDiv {
    
    
      display: inline-block;
      border: 1px dashed #ccc;
      width: 200px;
      height: 100px;
      margin: 14px 20px;
    }
  }
}

Aber wenn der Text zum Div hinzugefügt wird, sinkt das Div.

Grund

Hier müssen wir zunächst auf ein Attribut achten vertical-align: baseline;

Alle Attributwerte vertikal ausrichten:

baseline，top，middle，bottom，text-top，text-bottom

Der Umfang des Attributs:

Vertical-Align ist nur für Inline-Elemente (oder display: inline-block-Elemente auf Blockebene) gültig und wird entsprechend der Position des übergeordneten Elements positioniert.

Laienhaft ausgedrückt: Dieses Attribut dient dazu, den vertikalen Abstand des Elements in dieser Zeile in seinem übergeordneten Element zu bestimmen

Wenn nicht definiert, ist der Standardwert von Vertical-Align „Baseline“. Inline-Elemente werden entsprechend Vertical-Align vertikal ausgerichtet.

Zu Beginn befindet sich die Grundlinie des leeren Divs standardmäßig unten, und nachdem der Text bestimmt wurde, wird er anhand der Grundlinie des Textes bestimmt, und die Grundlinie des Texts wird durch die Schriftgröße und die Linie beeinflusst -height-Attribute, sodass das Div sinkt.

lösen

Zum Div hinzufügen:

vertical-align: top;