Question

我试图在Stack Overflow上找到任何类似问题的提示，但无济于事。为了从根本上理解mybst.insert和root，我遇到了一个对我没有意义的障碍。

CSS：

mybst = BST.new
p mybst.root
mybst.root = mybst.insert(1, mybst.root)
mybst.root = mybst.insert(2, mybst.root)
mybst.root = mybst.insert(10, mybst.root)
mybst.root = mybst.insert(12, mybst.root)

p mybst

HTML：

float

为什么第二个div有超过它的所有空间？我了解如何将clear包含到.div1 { background-color: red; width: 20%; height: 100%; display: inline-block; } .div2 { background-color: blue; width: 60%; height: 600px; display: inline-block; } .container { height: 800px; }可以缓解这个问题，因为<div class="container"> <div class="div1"></div> <div class="div2"></div> </div>会绕过float: left，但我无法理解为什么问题首先存在。我将不胜感激任何解释。谢谢。

这是一个JSFiddle，可以快速访问我正在使用的内容：https://jsfiddle.net/y8gdbzd6/3/

Answer 1

通过“tuck under”，我猜你指的是两个块的垂直对齐。

使用display: inline-block时，vertical-align属性默认设置为baseline。这将导致不同高度的元素根据父元素的基线排列。

您可能期待vertical-align: top：

的行为

.div1 {
  background-color: red;
  width: 20%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
}

.div2 {
  background-color: blue;
  width: 60%;
  height: 600px;
  display: inline-block;
  vertical-align: top;
}

.container {
  height: 800px;
}

<div class="container">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

为什么我容器中的第二个div被塞进去了？

1 个答案: