對話氣泡代碼

我的代碼有部分重疊，但我不知道如何。我試過改變邊框，插入填充，空格，調整寬度，檢查代碼，刪除絕對位置，沒有任何工作。氣泡不需要互動，但我需要它們保持相同的寬度，但高度不同。我還需要在他們之間有一個小的差距，但目前沒有任何差距。對話氣泡代碼

<!DOCTYPE html> 
<!-- Author: Lorna Costelloe --> 
<html> 
    <head> 
    <meta charset = "utf-8"> 
    <title>Speech Bubble</title> 
    <style media="screen" type="text/css"> 
     .speech-bubble{ 
      background-color: #f4911c; 
      border: 3px solid #662f8c; 
      border-radius: 5px; 
      width: 500px; 
      text-align: center; 
      padding: 20px; 
      position: absolute;} 
     .speech-bubble .arrow { 
      border-style: dotted; 
      position: absolute;} 
     .bottom { 
      border-color: #662f8c transparent transparent transparent; 
      border-width: 8px 8px 0px 8px; 
      bottom: -8px;} 
     .bottom:after { 
      border-color: #f4911c transparent transparent transparent; 
      border-style: dotted; 
      border-width: 7px 7px 0px 7px; 
      bottom: 1px; 
      content: ""; 
      position: absolute; 
      left: -7px;} 
    </style> 
</head> 
<body> 
    <!--copy and paste this for a new speech bubble. 
    <div class="speech-bubble"> 
     <div class="arrow bottom right"> 
     </div> 
     CONTENT HERE. 
    </div>--> 
    <div class="speech-bubble"> 
     <div class="arrow bottom right"></div> 
     TESt test test test test test test tes test TESt test test test  test test test tes testTESt test test test test test test tes test<br><br> 
     TESt test test test test test test tes testTESt test test test test test test tes testTESt test test test test test test tes test<br><br> 
     TESt test test test test test test tes test TESt test test test test test test tes testTESt test test test test test test tes test<br><br> 
     TESt test test test test test test tes testTESt test test test test test test tes testTESt test test test test test test tes test<br><br> 
     TESt test test test test test test tes test TESt test test test test test test tes testTESt test test test test test test tes test<br><br> 
     TESt test test test test test test tes testTESt test test test test test test tes testTESt test test test test test test tes test<br><br> 
     TESt test test test test test test tes test TESt test test test test test test tes testTESt test test test test test test tes test<br><br> 
     TESt test test test test test test tes testTESt test test test test test test tes testTESt test test test test test test tes test<br><br> 
    </div> 
    <br><br> 
    <div class="speech-bubble"> 
     <div class="arrow bottom right"> 
     </div> 
     second test second test second test second test second test second test second test second test second test second test <br><br> 
     second test second test second test second test second test second test second test second test second test second test <br><br> 
     second test second test second test second test second test second test second test second test second test second test <br><br> 
     second test second test second test second test second test second test second test second test second test second test <br><br> 
     second test second test second test second test second test second test second test second test second test second test <br><br> 
     second test second test second test second test second test second test second test second test second test second test <br><br> 
     second test second test second test second test second test second test second test second test second test second test <br><br> 
    </div> 
</body>

來源

2014-06-24 user3770449

使用'.speech泡{位置：相對} '而不是'位置：絕對'似乎解決你的大部分問題。也許......我基本上是在猜測......很難知道你所描述的最終結果是什麼。不知道這些'

'應該做什麼？猜測它們應該是靠近泡泡邊緣的小物件，以產生「泡泡」效果？可能可以使用圖片來查看您想要創建的內容。 – MLeFevre

而jsfiddle會很有用。 –

簡化！

更新 - 現在有紫色箭頭邊境:)

Have a fiddle!

HTML

<div class="speech-bubble"></div>

CSS

.speech-bubble { 
     background-color: #f4911c; 
     border: 3px solid #662f8c; 
     border-radius: 5px; 
     width: 500px; 
     text-align: center; 
     padding: 20px; 
     position: relative; 
     margin: 0 0 40px; 
    } 
    .speech-bubble:before { 
     border-color: #662f8c transparent transparent transparent; 
     border-width: 8px 8px 0px 8px; 
     border-style: dotted; 
     position: absolute; 
     left: 9px; 
     bottom: -8px; 
     content:''; 
    } 
    .speech-bubble:after { 
     border-color: #f4911c transparent; 
     border-style: dotted; 
     border-width: 7px 7px 0px; 
     bottom: -7px; 
     content:''; 
     position: absolute; 
     left: 10px; 
    }

來源

2014-06-24 10:07:52 misterManSam

記得在'.speech-bubble'上始終有一個底部空白 – misterManSam

嘗試這樣的：LINK

CSS：

.speech-bubble { 
     background-color: #f4911c; 
     border: 3px solid #662f8c; 
     border-radius: 5px; 
     width: 500px; 
     text-align: center; 
     padding: 20px; 
     position: relative; 
    }

來源

2014-06-24 09:46:27

對話氣泡代碼

回答

相關問題