CSS - 防止儿童具有相同的宽度

Question

我有以下HTML：

<div id="ohsnap">
  <div class="alert alert-red">First</div>
  <div class="alert alert-yellow">Second</div>
</div>

使用以下CSS：

#ohsnap {
  position: absolute;
  bottom: 5px;
  right:5px;
  margin-left: 5px;
  z-index:99;
}

.alert {
  text-align: right;
  margin-top: 10px;
  padding: 15px;
  border: 1px solid #eed3d7;
  border-radius: 4px;
}

.alert-red {
  color: white;
  background-color: #DA4453;
}

出于某种原因，警报（子div）采用相同的宽度。当删除最大的div时，会重新计算所有警报div的宽度...我希望每个div只占用必要的空间来显示内部文本，而不会在其他div被删除时调整大小。

那是什么必要的CSS？

Answer 1

已修复

.alert {
  float: right;
  clear: right;
}

jsFiddle Demo

Answer 2

浮动是一个选项，但它允许警报框超出其容器的边缘。另一种选择是：

<div id="ohsnap">
  <!-- note BRs added below -->
  <div class="alert alert-red">First</div><br>
  <div class="alert alert-yellow">Second</div><br>
</div>

并将其添加到CSS：

.alert { display: inline-block }