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 に答える