将内联块 DIV 对齐到容器元素的顶部答案

【问题标题】：Align inline-block DIVs to top of container element将内联块 DIV 对齐到容器元素的顶部
【发布时间】：2021-03-16 22:56:25
【问题描述】：

当两个inline-blockdivs 有不同的高度时，为什么两者中较短的不与容器的顶部对齐？ (DEMO):

.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？

【问题讨论】：

或像这样浮动它们：jsfiddle.net/RHM5L/12
Take a look
应用垂直对齐：顶部；对于 .small 类
我不想使用浮点数。谢谢@Mr.Alien，它现在可以工作了:)

标签： css

【解决方案1】：

因为vertical-align 默认设置为基线。

改用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 应用于子元素。

【讨论】：

如果我应用浮动，如果容器像我的情况一样只有浮动儿童，我会遇到高度问题。看看这里article
知道为什么baseline 是默认值吗？我相信这是有充分理由的，但出乎意料的是，这似乎很奇怪。你最终会得到曼哈顿的天际线效果。
垂直对齐用于字体对齐，因为字体有基线，所以默认解析为基线是合乎逻辑的。在像这样的其他场合，你必须覆盖它。

【解决方案2】：

您需要将 vertical-align 属性添加到您的两个子 div 中。

如果.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。

【讨论】：

【解决方案3】：

<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/>");

})

【讨论】：

我认为只需将跨度的默认显示属性从内联更改为块即可。

【解决方案4】：

将溢出：自动添加到容器 div。 http://www.quirksmode.org/css/clearing.html 这个网站在遇到这个问题时显示了一些选项。

【讨论】：