鍍金池/ 問答/HTML/ CSS3實(shí)現(xiàn)右上角卡片通知提示

CSS3實(shí)現(xiàn)右上角卡片通知提示

<!doctype html>
<html>
<head>
    <style>
        .container {
            position: fixed;
            top: 45px;
            right: 4px;
            height: 0;
            text-align: right;
            overflow: visible;
        }
        .card {
            display: inline-block;
            max-width: 200px;
            line-height: 24px;
            padding: 8px 12px;
            margin-bottom: 4px;
            color: #FFFFFF;
            text-align: left;
            background-color: #F68C1E;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card"><span>寬度不一</span></div><br>
        <div class="card"><span>有色區(qū)域?yàn)檎鎸?shí)大小</span></div><br>
        <div class="card"><span>結(jié)構(gòu)簡(jiǎn)單</span></div>
    </div>
</body>
</html>

目前這個(gè)就是想要的效果，但是要用<br>來換行，試過

.card::after {
    content: "\A";
    white-space: pre;
}

但對(duì)inline-block的元素沒有效果，用inline-block是為了讓div適應(yīng)內(nèi)容大小而不是鋪滿父div寬度。
有沒有大神可以幫忙實(shí)現(xiàn)結(jié)構(gòu)簡(jiǎn)單的去掉<br>同樣的效果，感激不盡。
預(yù)覽代碼：http://runjs.cn/detail/kjprizbv

回答
編輯回答
扯機(jī)薄

可以考慮用FlexBox來解決，下面是我改動(dòng)的代碼，可以參考一下

<!doctype html>
<html>
<head>
  <style>
    .container {
      position: fixed;
      top: 45px;
      right: 4px;

      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      max-width: 200px;
    }
    .card {
      padding: 8px 12px;
      margin-bottom: 4px;
      color: #fff;
      background-color: #F68C1E;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="card"><span>寬度不一</span></div><br>
    <div class="card"><span>有色區(qū)域?yàn)檎鎸?shí)大小</span></div><br>
    <div class="card"><span>結(jié)構(gòu)簡(jiǎn)單</span></div>
  </div>
</body>
</html>
2017年6月1日 06:56