CSS автоматическая настройка не ПОЛНАЯ проблема ширины - PullRequest
Новая
       54

CSS автоматическая настройка не ПОЛНАЯ проблема ширины

5 голосов
/ 25 февраля 2010

Я хочу сделать так, чтобы размер пузырька автоматически настраивался после текста (комментария), который находится внутри div. Во-первых, вот код: .пузырь { размер шрифта: 12 пикселей; нижнее поле: 0px; } 

.bubble blockquote {
    margin: 0px;
    padding: 0px;
    border: 1px solid #c9c2c1;
    background-color: #000;
}
.bubble blockquote p {
    display: inline;
    margin: 0px;
    padding: 0px;
        font-size: 18px;
}

.bubble cite {
    position: absolute;
    margin: 0px;
    padding: 7px 0px 0px 15px;
    top: 5px;
    background: transparent url(b/tip.gif) no-repeat 20px 0;
    font-style: normal;
}

А на странице: 

<div class="bubble">
<blockquote>
<p>
Hello, my name is Azzyh
</p>
</blockquote>
<cite>I wrote this today</cite>
</div>

Теперь, как я уже сказал, я хочу, чтобы он автоматически подстраивался под текст, так что "пузырь" вокруг "привет, меня зовут Аззых" ..

Не так, как сейчас: http://img341.imageshack.us/img341/8303/exampleu.png Как видите, все идет в правый + левый конец браузера ..

Проверьте изображение, вы увидите строку («прямоугольник»), где находится текст, слишком велики для текста. Я хочу, чтобы css отрегулировал поле после текста ... так что "строки" обойдут текст "привет, меня зовут" извините за мой английский

Посмотри это изображение: http://img17.imageshack.us/img17/6057/exampleph.png «Красный» - это то, как я хочу, чтобы это было ..

Как я могу это сделать?

Спасибо

Ответы [ 3 ]

6 голосов
/ 25 февраля 2010

div элементы - это элементы уровня блока, которые по умолчанию растягиваются влево и вправо настолько, насколько позволяют их содержащие блоки.

Чтобы автоматически настроить ширину div, вам нужно преобразовать ее во встроенный элемент, используя тот же стиль, что и для p: display: inline;

Обратите внимание, что это может привести к непреднамеренному побочному эффекту, заключающемуся в том, что вы автоматически не вводите каждый div на новую строку. Однако без дополнительной информации я не совсем уверен, будет ли это хорошо или плохо в вашем макете.

2 голосов
/ 14 марта 2013

Аналогичная проблема, с которой я столкнулся, была решена с помощью следующего CSS: 

display:inline-block;

Я хотел, чтобы ссылка выглядела как кнопка, но не расширяла фон, чтобы заполнить ширину содержащего DIV.

Поддерживается почти во всех браузерах, включая частичную поддержку в IE6 и IE7, но только там, где элемент имеет встроенный параметр по умолчанию. Есть несколько альтернативных свойств для получения кросс-браузерной поддержки. Есть также кое-что в Google Code для setInlineBlock , но я сам не пробовал.

0 голосов
/ 10 марта 2012

Переместить вашу границу собственности 

border: 1px solid #c9c2c1;

от 

.bubble blockquote {}

в ваш 

.bubble blockquote p {}

и это должно поставить коробку, где вы хотите.

...