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

Posted 2023-03-05

【中文标题】将内联块 DIV 对齐到容器元素的顶部

【英文标题】：Align inline-block DIVs to top of container element

【发布时间】：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，它现在可以工作了:)

【参考方案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 这个网站在遇到这个问题时显示了一些选项。