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

当两个内联块div具有不同的高度时，为什么两个中较短的没有对齐到容器的顶部?(演示):

.container { 边框:1px黑色实心; 宽度:320 px; 身高:120 px; } .small { 显示:inline-block; 宽度:40%; 高度:30%; 边框:1px黑色实心; 背景:aliceblue; } .big { 显示:inline-block; 边框:1px黑色实心; 宽度:40%; 高度:50%; 背景:米色; } < div class = "容器" > < div class = "小" > < / div > < div class = "大" > < / div > < / div >

我怎么能在它的容器顶部对齐小div ?

当前回答

为父div使用display: flex属性

flexbox项目在交叉轴的开始处对齐。默认情况下，交叉轴是垂直的。这意味着flexbox项目将在顶部垂直对齐。

所以当你把display: flex属性应用到父div时，它会用vertical-align: top来设置它的子元素。

请看下面的代码: .container { 边框:1px黑色实心; 宽度:320 px; 身高:120 px; 显示:flex; /** CSS flex */ ｝ .small { 显示:inline-block; 宽度:40%; 高度:30%; 边框:1px黑色实心; 背景:aliceblue; ｝ .big { 显示:inline-block; 边框:1px黑色实心; 宽度:40%; 高度:50%; 背景:米色; ｝ < div class = "容器" > < div class = "小" > < / div > < div class = "大" > < / div > < / div >

浏览器兼容性:Flexbox在现代浏览器中得到了很好的支持。

2022-09-16 15:56:18

其他回答

因为垂直对齐被默认设置为基线。

使用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。

2014-02-28 10:41:18

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

})

2018-08-01 13:24:35

您需要为两个子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。

2014-02-28 10:41:47

将overflow: auto添加到容器div中。 http://www.quirksmode.org/css/clearing.html当遇到这个问题时，这个网站显示了一些选项。

2014-02-28 10:52:11