Question

这是一个简化的代码，我有一个绝对div，里面有四个亲戚div作为四列。为什么内部div不与外部div的顶部对齐？

P.S。：我知道还有其他方法可以实现，但真正的代码更复杂，这就是我需要的解决方案。

<div style="position: absolute; top: 100px; left: 100px; width: 800px; height: 400px; background-color: red; margin: 0; padding: 0;">
  <div style="position: relative; display: inline-block; height: 100%; width: 25%; background-color: blue;">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
  </div><div style="position: relative; display: inline-block; height: 100%; width: 25%; background-color: yellow;">
    <p>1</p>
    <p>2</p>
  </div><div style="position: relative; display: inline-block; height: 100%; width: 25%; background-color: green;">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
  </div><div style="position: relative; display: inline-block; height: 100%; width: 25%; background-color: pink;">
    <p>1</p>
    <p>2</p>
  </div>
</div>

Answer 1

因为默认情况下内联元素的垂直对齐设置为基线。将其更改为顶部：

div > div {
    vertical-align:top;
}

<div style="position: absolute; top: 100px; left: 100px; width: 800px; height: 400px; background-color: red; margin: 0; padding: 0;">
    <div style="position: relative; display: inline-block; height: 100%; width: 25%; background-color: blue;">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div><div style="position: relative; display: inline-block; height: 100%; width: 25%; background-color: yellow;">
        <p>1</p>
        <p>2</p>
    </div><div style="position: relative; display: inline-block; height: 100%; width: 25%; background-color: green;">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div><div style="position: relative; display: inline-block; height: 100%; width: 25%; background-color: pink;">
        <p>1</p>
        <p>2</p>
    </div>
</div>

如果您希望父容器div包含子div，请添加overflow:auto。

CSS divs没有正确对齐

1 个答案: