HTML語音泡泡標記

fyi：我正在研究一些語音泡泡的HTML標記。
這個複雜的標記的原因是，speechbubble應該與其內容一起增長。HTML語音泡泡標記

因此，首先在這裏我最近的標記：

<div class="speachbubble"> 
<div class="topbar"> 
    <div class="corner top-left"></div> 
      <div class="top"></div> 
      <div class="corner top-right"></div> 
    <div class="clear"></div> 
</div> 
<div class="middlebar"> 
    <div class="left"></div> 
      <div class="content">HERE iS SOME TEXT</div> 
      <div class="right"></div> 
    <div class="clear"></div> 
</div> 
<div class="bottombar"> 
    <div class="corner bottom-left"></div> 
      <div class="bottom"></div> 
      <div class="corner bottom-right"></div> 
    <div class="clear"></div> 
</div>

Left Complete - Right Splitted

在圖片上傳IVE您可以在左側的整個speachbubble看到。右側顯示分割的圖形。 因此，speachbubble中的內容在其長度上保持動態。

我在複雜的CSS的東西很糟糕，也許有人可以幫助我？ :( BIG非常感謝

PS：！所有應寫入無CSS3

來源

2011-08-03 YeppThat' sMe

你不需要複雜的標記來使其與文本「可增長」;語音氣泡其實不是CSS3（除了圓角）。下面的例子是所有CSS1與例外「：後」選擇是CSS2

檢查出這個小提琴：http://jsfiddle.net/FbHVk/3/

還是看下面的代碼的HTML和CSS：

HTML：

<span class="bubble"> this is some text</span>

CSS：

.bubble{ 
    position:relative; 
    padding: 10px; 
    background: #AAAAFF; 
} 

.bubble:after{ 
    position:absolute; 
    content: ""; 
    top:15px;right:-10px; 
    border-width: 10px 0 10px 15px; 
    border-color: transparent #AAAAFF; 
    border-style: solid; 
}

來源

2011-08-03 19:00:59 mrBorna

：選擇器之後，我一直在尋找！：D非常感謝 –

你也可以用一個元素做到這一點，我不知道爲什麼我沒有，我很着急。我編輯了小提琴和上面的代碼 – mrBorna

哇，好的再次感謝 –

爲什麼要使用一些jQuery的用它的插件

它節省了找你時候也試試這個：

qTip

來源

2011-08-03 18:44:03 kritya

理論上你只需要上杆和下杆。如果你把圖像在中間也不會與文本正常生長。讓您的整個頂部欄一個形象，你的底欄和其他組他們分別爲topbar和bottombar的背景。然後，您需要定義speechbubble的寬度，該寬度等於用於topbar和bottombar的圖像的寬度。從左側和右側使用的圖像寬度分別將padding-right和padding-left放在文本上。這將允許您保持圓角效果並讓您的內容增長。

來源

2011-08-03 18:57:37

在我的情況下，這不會工作，因爲每個speechbubble應該是不同的。一個是長而小，另一個是短而大的。因此，修復圖像的頂部和底部不會起作用 –

然後，您只需設置角落圖像。 –

感謝您的回答。我稍微修改了兩個不同的人說話。

http://jsfiddle.net/FbHVk/73/

<style type="text/css"> 
    .bubbleright { 
     position:relative; 
     padding: 10px; 
     background: #ddd; 
     margin: 5px 5px; 
     max-width: 250px; 
     left: 50px; 
    } 

    .bubbleright:after{ 
     position:absolute; 
     content: ""; 
     top:15px;right:-10px; 
     border-width: 10px 0 10px 15px; 
     border-color: transparent #ddd; 
     border-style: solid; 
    } 

    .bubbleleft{ 
     position:relative; 
     left: 15px; 
     padding: 10px; 
     background: #aaa; 
     margin: 5px 5px; 
     max-width: 250px; 
    } 

    .bubbleleft:before{ 
     position:absolute; 
     content: ""; 
     top:15px;left:-10px; 
     border-width: 10px 15px 10px 0px; 
     border-color: transparent #aaa; 
     border-style: solid; 
    } 

</style> 

<div class="bubbleleft"> 
    I say something 
</div> 

<div class="bubbleright"> 
    So does he 
</div>

來源

2014-05-28 11:59:05

HTML語音泡泡標記

回答

相關問題