主页 / 问题 / 1158365
Accepted
Koffe
Asked:2020-07-28 21:17:15 +0000 UTC2020-07-28 21:17:15 +0000 UTC

HTML/CSS 中的子块放置逻辑

  • 772

我研究性质display: block，display: inline和display: inline-block。

当我排版没有子元素的元素时，一切都清楚了，但现在却有一种奇怪的感觉。

为什么第二列中的子块移动到具有更多子块的列的底部？

.column {
  display: inline-block;
}

.div1 {
  background: cyan;
}

.div2 {
  background: brown;
}
<div class="column">
  <div class="div1">div1</div>
  <div class="div2">div2</div>
</div>
<div class="column">
  <div class="div1">div1</div>
</div>
<div class="column">
  <div class="div1">div1</div>
  <div class="div2">div2</div>
</div>

html

1 个回答

  1. Best Answer

    垂直对齐属性的默认值为“基线”，当您将块元素转换为内联块时，它将应用于它。

    我已经说明了下面的区别：

    在此处输入描述

    现场示例：

    * {
  box-sizing: border-box;
}

.example {
  display: inline-block;
  vertical-align: top;
  border: 1px solid;
  padding: 10px;
  margin: 10px;
}

.column {
  display: inline-block;
  vertical-align: baseline;
}

.example.one .column {
  vertical-align: baseline; // значение по умолчанию
}

.example.two .column {
  vertical-align: middle;
}

.example.three .column {
  vertical-align: top;
}

.div1 {
  background-color: orange;
}

.div2 {
  background-color: cyan;
}
    <div class="example one">
  <p>baseline<p>
  <small>значение по умолчанию</small>
  <div class="column">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
  </div>

  <div class="column">
    <div class="div1">div1</div>
  </div>

  <div class="column">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
  </div>
</div>

<div class="example two">
  <p>middle<p>
  <small>&nbsp;</small>
  <div class="column">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
  </div>

  <div class="column">
    <div class="div1">div1</div>
  </div>

  <div class="column">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
  </div>
</div>

<div class="example three">
  <p>top<p>
  <small>&nbsp;</small>
  <div class="column">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
  </div>

  <div class="column">
    <div class="div1">div1</div>
  </div>

  <div class="column">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
  </div>
</div>

    • 12

相关问题