Question

我的问题是我想要获得三个完全独立的列并且使用'display：inline-block'，我的列并排，但是从最大的列开始。

HTML，CSS：

.container > div {
	display: inline-block;
}

<body>
  <div class="container">
  <div>
    aaaaaaa<br>bbbbbb
  </div>
  <div>
    cccccc<br> ddddddd<br>eeeeeee
  </div>  
    <div id="end">
      ffffff
    </div>
  </div>
    
</body>

问题是最小的行与最大div的最后一行对齐，如下所示：

Answer 1

处理内联级和表格单元格时，vertical-align属性适用。此属性的初始值为baseline。这就是你所看到的。每个框中的文本与基线对齐。将vertical-align属性调整为另一个值（例如top）可以解决问题。 https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

Answer 2

找到解决方案，虽然我认为这不是最好的方法：

.container > div {
   vertical-align: top;
}

：）

Answer 3

您可以添加css属性vertical-align：top，这样所有内容都将从div的顶部开始。

＆＃13;

.container > div {
	display: inline-block;
vertical-align:top
}

＆＃13;

<body>
  <div class="container">
  <div>
    aaaaaaa<br>bbbbbb
  </div>
  <div>
    cccccc<br> ddddddd<br>eeeeeee
  </div>  
    <div id="end">
      ffffff
    </div>
  </div>
    
</body>

＆＃13;

display：inline-block将我的div向下推

3 个答案: