Question

我需要将 div 放置在包含 div 的顶部，并将未使用的空间留在自身下方。默认行为似乎相反，例如包含的 div 包含在 div 的下限，并在其上方留下未使用的空格。

我认为这样做很简单，但我甚至不知道如何在Google上搜索解决方案（试过＆＃34; div float top＆＃34;，＆＃34 ; div gravity＆＃34;以及其他一些无意义的搜索...）

这是我的HTML代码：

<div class="bonus">
  <div class="bonusbookmakerlogo">
    <a rel="nofollow" href="http://..." target="_blank"><img src="/img/box.png" alt="blah" title="blah"/></a>
  </div>
  <div class="bonustext">
    <span>Bonus description.</span>
  </div>
  <div class="bonusdivider"></div>
</div>

相关的css：

.bonus {
  font-size: 90%;
  text-align: justify;
  margin: 1em 2em;
}

.bonusdivider {
  margin: 1em 0 1em 0;
  border: none;
  height: 1px;
  color: #999999; 
  background-color: #999999; 
}

.bonusbookmakerlogo {
  display: inline-block;
  width: 20%;
}

.bonustext {
  display: inline-block;
  width: 70%;
}

结果布局没问题，除了徽标 div （包含 img 标签的徽标）占据其 div 的下半部分自由空间，而我需要它来战斗＆＃34;重力并保持其顶部边缘钩住容器顶部边缘。

提前感谢您的帮助。

Answer 1

这是使用float而不是inline-block进行的略微修改。似乎工作正常：

<div class="bonus">
  <div class="bonusbookmakerlogo">
    <a rel="nofollow" href="http://..." target="_blank"><img src="/img/box.png" alt="blah" title="blah"/></a>
  </div>
  <div class="bonustext">
    <span>Bonus description.</span>
  </div>
  <div class="bonusdivider"></div>
</div>

和CSS：

  .bonus {
    font-size: 90%;
    text-align: justify;
    margin: 1em 2em;
    height: 100px;
    border: 10px solid red; /* test */
  }

  .bonusdivider {
    margin: 1em 0 1em 0;
    border: none;
    height: 1px;
    color: #999999; 
    background-color: #999999; 
    clear: both;
  }

  .bonusbookmakerlogo {
    float: left;
    width: 20%;
  }

  .bonustext {
    float: left;
    width: 70%;
  }

Answer 2

@Marius George的回答是有效的，我认为这是最干净的解决方案，但在这里，我发现了一个与众不同的解决方案：

.bonusbookmakerlogo {
  display: inline-block;
  width: 20%;
  vertical-align: top;
}

<div>位于容器顶部</div>

2 个答案: