Question

当div在同一个容器中与另一个较大的div相邻时，较小的div停留在底部。我想从头开始，知道怎么做吗？

请参见下面的示例。我希望红色框一直向上，当然不使用相对位置之类的东西，而只是将其向上移动px或em

如果有人可以解释我的盒子之间的间距来自哪里，因为我没有指定任何填充或边距；所以奖励点；）

.container {
  background-color: blue;
  width: 700px;
  height: auto;
}

.small {
  width: 200px;
  height: 200px;
  display: inline-block;
  background-color: red;
}

.big {
  height: 400px;
  width: 400px;
  display: inline-block;
  background-color: green;
}

<div class=container>
  <div class=small></div>
  <div class=big></div>
</div>

Answer 1

vertical-align适用于display: inline-block;的元素-因此只需添加vertical-align: top;

对于空格，这是元素之间的“空白”，之所以存在是因为div位于单独的行上。有很多解决方案，其中一种就是简单地使关闭</div>和打开<div>紧邻（例如：</div><div>），这在下面的代码段中已经实现。

.container {
  background-color: blue;
  width: 700px;
  height: auto;
}

.small {
  width: 200px;
  height: 200px;
  display: inline-block;
  vertical-align: top;
  background-color: red;
}

.big {
  height: 400px;
  width: 400px;
  display: inline-block;
  vertical-align: top;
  background-color: green;
}

<div class=container>
  <div class=small></div><div class=big></div>
</div>

Answer 2

CSS Flexbox是解决容器和子项布局问题的最佳方法。请注意，我在您的容器中添加了display: flex和align-items: flex-start。第二个组件具有使所有子组件与顶部对齐的魔力。请点击上面的链接以获取非常有用的参考。另外请注意，您的间距问题已解决。

.container {
    background-color:blue;
    width: 700px;
    height: auto;
    display: flex;
    align-items: flex-start;
}

.small {
    width:200px;
    height:200px;
    display:inline-block;
    background-color:red;
}

.big {
    height: 400px;
    width:400px;
    display:inline-block;
    background-color:green;
}

<div class=container>
    <div class=small></div>
    <div class=big></div>
</div>

Answer 3

只需将vertical-align: top;添加到两个元素。

由于两个元素都是内联块并且被视为文本元素，因此也添加了空格，您可以通过将font-size到0设置为父元素来解决此问题，如下所示：

.container{ 
    font-size: 0;
}

如果要向子元素添加一些文本，请不要忘记为其设置正确的字体大小，例如：

.small, .big{
    font-size: 16px;
}

Answer 4

可能有更好的解决方案，但是如果您将每个元素都浮动，则会为您提供所需的输出。

.container {
  background-color: blue;
  width: 700px;
  height: auto;
}

.small {
  width: 200px;
  height: 200px;
  display: inline-block;
  background-color: red;
}

.big {
  height: 400px;
  width: 400px;
  display: inline-block;
  background-color: green;
}
.left{
  float: left
}

<div class="container left">
  <div class="small left"></div>
  <div class="big left"></div>
</div>

在容器中向上移动div

4 个答案: