在div列上的CSS邊框

我想用CSS設計一些像HTML中的評論框那樣的對話框。但是我無法使用填充格來使用剩餘的寬度。在div列上的CSS邊框

enter image description here

那麼，怎樣才能我得到的邊界是完整的？

我用我的完整代碼創建了一個jsfiddle（圖像除外）。 http://jsfiddle.net/qHVk3/

來源

2011-07-21 iuiz

忘記張貼小提琴：P –

除非我莫名其妙地失蹤了，你實際上並沒有張貼您提到的jsfiddle。 –

對不起，現在它在那裏。 – iuiz

在這裏，我能做到的，基本上填料是100％寬，但在箭頭下。

http://jsfiddle.net/aWxPX/

來源

2011-07-21 18:31:10

非常感謝。這花了我幾個小時:)。從來沒有想過Z指數。我從來沒有使用過「清晰」的。謝謝！ – iuiz

它被稱爲清除修復，當您在非浮動div中有浮點時，它會設置div高度。 –

你知道整個泡泡的寬度嗎？你可以分割日期div和填充div之間的空格。

來源

2011-07-21 18:19:06 dschooh

是的，但這感覺就像一個解決方法:)。我發現了這個問題的一些類似的解決方案，但所有的硬編碼寬度。 – iuiz

它看起來就像你做了很多更復雜的CSS比你需要的東西。

看看這個，它是用CSS和一個段落標記完全做了講話泡沫：
http://jsfiddle.net/XBZaA/2/

它來自於這裏，你可以得到各種複雜的樣式箭頭和思想泡沫取決於在CSS多少html元素你沒事帶：
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

HTML

<p class="triangle-border">This only needs one HTML element.</p>

CSS

.triangle-border { 
    position:relative; 
    padding:15px; 
    margin:1em 0 3em; 
    border:5px solid #5a8f00; 
    color:#333; 
    background:#fff; 
    /* css3 */ 
    -webkit-border-radius:10px; 
    -moz-border-radius:10px; 
    border-radius:10px; 
} 

.triangle-border:before { 
    content:""; 
    position:absolute; 
    bottom:-20px; /* value = - border-top-width - border-bottom-width */ 
    left:40px; /* controls horizontal position */ 
    border-width:20px 20px 0; 
    border-style:solid; 
    border-color:#5a8f00 transparent; 
    /* reduce the damage in FF3.0 */ 
    display:block; 
    width:0; 
} 

/* creates the smaller triangle */ 
.triangle-border:after { 
    content:""; 
    position:absolute; 
    bottom:-13px; /* value = - border-top-width - border-bottom-width */ 
    left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */ 
    border-width:13px 13px 0; 
    border-style:solid; 
    border-color:#fff transparent; 
    /* reduce the damage in FF3.0 */ 
    display:block; 
    width:0; 
}

來源

2011-07-21 18:58:33 evan

這非常好。我不知道你可以用純CSS做到這一點。 – iuiz

在div列上的CSS邊框

回答

相關問題