1

我有以下 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？

4

2 回答 2

2

固定与

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

jsFiddle 演示

于 2013-09-06T19:07:21.643 回答
1

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

<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 }
于 2013-09-06T19:09:18.573 回答