将inline-block DIVs与容器元素顶部对齐

Question

当两个 inline-block 的 div 高度不同时，为什么较短的一个不能与容器顶部对齐？(演示)：

.container { 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small {
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;    
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige;    
}

<div class="container">
    <div class="small"></div>
    <div class="big"></div>
</div>

如何使小的div与其容器顶部对齐？

- Hayi

---

将它们浮动起来，就像这样：http://jsfiddle.net/RHM5L/12/ - AO_

请查看以下链接：https://stackoverflow.com/questions/22064029/lis-lose-their-position/22064075#22064075 - Mr. Alien

为 .small 类应用 vertical-align:top;。 - Deepu Sasidharan

我不想使用浮点数。谢谢@Mr.Alien，现在它可以工作了 :) - Hayi

Answer 1

由于默认情况下 vertical-align 被设置为 baseline，因此请改用 vertical-align:top：

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;   
    vertical-align:top; /* <---- this */
}

http://jsfiddle.net/Lighty_46/RHM5L/9/

或者像@f00644所说，你也可以将float应用于子元素。

- Lighty_46

---

如果我使用浮动，当容器只有浮动子元素时，例如在我的情况下，高度会出现问题。请看这里文章。 - Hayi

有没有想过为什么“baseline”是默认值？我相信有一个很好的理由，但对于非专业人士来说，这似乎很奇怪。最终会产生曼哈顿天际线的效果。 - Sridhar Sarnobat

垂直对齐用于字体对齐，由于字体具有基线，因此默认情况下解析为基线是合理的。在其他情况下，例如此处，您必须覆盖它。 - ceed

Answer 2

你需要在两个子

元素中添加vertical-align属性。

如果.small始终较短，则只需将该属性应用于.small。 但是，如果任何一个

可能最高，则应将该属性应用于.small和.big两者。

.container{ 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue; 
    vertical-align: top;   
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige; 
    vertical-align: top;   
}

垂直对齐影响内联或表格单元格框的位置，此属性有很多不同的值。请参见https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align获取更多详细信息。

- michaelward82

Answer 3

使用display: flex属性来设置父级div

默认情况下，flexbox项目在交叉轴的起点对齐。交叉轴默认为垂直方向，这意味着flexbox项目将在顶部垂直对齐。

因此，当您将display: flex属性应用于父级div时，它会将其子元素设置为vertical-align: top。

See the following code:

.container {
  border: 1px black solid;
  width: 320px;
  height: 120px;
  display: flex;
  /** CSS flex */
}

.small {
  display: inline-block;
  width: 40%;
  height: 30%;
  border: 1px black solid;
  background: aliceblue;
}

.big {
  display: inline-block;
  border: 1px black solid;
  width: 40%;
  height: 50%;
  background: beige;
}

<div class="container">
  <div class="small"></div>
  <div class="big"></div>
</div>

浏览器兼容性：Flexbox在现代浏览器中得到了广泛支持。

- samnoon

Answer 4

<style type="text/css">
        div {
  text-align: center;
         }

         .img1{
            width: 150px;
            height: 150px;
            border-radius: 50%;
         }

         span{
            display: block;
         }
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
  <span class='dif'></span>
  <br>
  <button>ADD</button>
</div>

<script type="text/javascript">

$('button').click(function() {
  $('.dif').html("<img/>");

})

- holyghostgym

---

我认为只需将span的默认显示属性从inline更改为block即可解决问题。 - holyghostgym

Answer 5

在容器div中添加overflow: auto。 http://www.quirksmode.org/css/clearing.html 这个网站展示了一些解决这个问题的选项。

- Kbaugh