CSS-граница над столбцами div - PullRequest
Новая
       0

CSS-граница над столбцами div

0 голосов
/ 21 июля 2011

Я хочу создать речевой пузырь типа комментария в HTML с помощью CSS. Однако я не могу заставить заполнитель div использовать оставшуюся ширину.

enter image description here

Так, как я могу получить границу, чтобы быть законченным?

Я создал jsfiddle со своим полным кодом (за исключением изображений). http://jsfiddle.net/qHVk3/

Ответы [ 3 ]

1 голос
/ 21 июля 2011

Вот что я смог сделать, в основном наполнитель имеет ширину 100%, но находится под стрелкой.

http://jsfiddle.net/aWxPX/

1 голос
/ 21 июля 2011

Похоже, вы делаете намного более сложную 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;
}
1 голос
/ 21 июля 2011

Знаете ли вы ширину всего пузыря?Тогда вы можете разделить пространство между датой div и заполнителем div.

...