将嵌入式块DIV对齐到容器元素的顶部
当两个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容器的顶部对齐？
问题答案：
因为默认vertical-align设置为 基线 。
使用vertical-align:top来代替：
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top;
}
您也可以将其应用于float子元素。
-
我试图将容器中的三个div中的一个进行底部对齐，但遇到了一些问题。 正如您将看到的，如果我尝试在
-
我正在使用angular 2与Bootstrap 4和angular Material。然而，我有困难正确地对齐我的容器div中的元素。我希望我的按钮和文本都对齐到右手边 下面是我尝试生成如照片所示结果的代码 我也从StackOverflow尝试过这个解决方案 这两种解决方案都不会将元素向右移动。我做错了什么？
-
我需要树放置在右上角的Foo。
-
问题内容： 我的html文档的正文包含3个元素，一个按钮，一个表单和一个画布。我希望按钮和表单右对齐，而画布保持左对齐。问题是当我尝试对齐前两个元素时，它们不再彼此跟随，而是水平地彼此相邻吗？，这是我到目前为止的代码，我希望表格紧跟在右边的按钮之后中间没有空格。 问题答案： 您可以创建一个同时包含表单和按钮的div，然后通过设置将div浮动到右侧。
-
我的html文档的主体由3个元素组成，一个按钮、一个表单和一个画布。我希望按钮和窗体右对齐，画布保持左对齐。问题是，当我尝试对齐前两个元素时，它们不再相互跟随，而是水平地紧挨着？，这是我到目前为止的代码，我希望窗体直接跟随在右边的按钮之后，中间没有空格。 null null
-
问题内容： 我有商品清单。我需要在二维列表中显示它们。每个商品都有子元素：照片，标题，描述，价格和购买按钮，其大小和位置必须采用这种方式：商品行中的所有标题，描述，价格和照片必须位于相同的y坐标位置并具有高度，它是一行中相应的高度元素的最大值。 我已经尝试过：“ grid-template-rows：1fr 1fr 1fr 1fr 30px；” 使所有子元素都位于同一y位置，但是我需要它们的高度以