CSS边框上的div列

Question

我想用CSS在HTML中设计一些像评论框这样的语音泡泡。但是我无法使用填充div来使用剩余的宽度。

那么我怎样才能让边界完整？

我用完整的代码创建了一个jsfiddle（图像除外）。 http://jsfiddle.net/qHVk3/

Answer 1

你知道整个泡泡的宽度吗？您可以将日期div和填充div之间的空格分开。

Answer 2

在这里我能够做到的，基本上填充物是100％宽，但是在箭头下。

http://jsfiddle.net/aWxPX/

Answer 3

看起来你的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;
}