Div с неуказанной шириной (абсолютное позиционирование)

У меня есть абсолютно позиционированный div, с которым я работаю, и я вложил в него некоторый текст, чтобы найти его на странице, а именно:

<div style="position:absolute; top:10px; left:500px; font-size:30px; ">Example Text </div>

Текст заканчивается обертыванием, т.е. "Пример" и "Текст" находятся на другой строке. В моем браузере Firefox нет полос прокрутки, на самом деле ширина составляет около 1000 пикселей. Нужно ли устанавливать ширину на divs? Разве они не расширяются, чтобы держать свой контент?

В случае, если это помогает, я включил вывод Firebug CSS для этого элемента здесь:

element.style {
      font-size: 30px;
      left: 500px;
      position: absolute;
      top: 10px;
}
html * {
    margin: 0;
}              //  main.css (line 1)

Inherited from body:

body {
    color: #333333;
    font: 11px verdana,arial,helvetica,sans-serif;
}

Спасибо

Ответ 1

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

Обычно браузеры будут пытаться заполнить оставшееся горизонтальное пространство браузера, если ширина не указана (или когда ширина равна "авто", ширина по умолчанию), поэтому то, что вы описываете, звучит необычно. Скорее всего, что-то другое мешает элементу вызывать такое поведение (например, относительно или абсолютно позиционированный элемент где-то в родительской цепочке).

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

Ответ 2

Попробуйте добавить:

white-space: nowrap;

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

Ответ 3

В абсолютно позиционированном элементе добавьте:

display: table;

Ответ 4

У меня есть это решение для этого:

<style>

html * {
        margin: 0;
    }     

    body {
        color: #333333;
        font: 11px verdana,arial,helvetica,sans-serif;
    }

    #a1{
        position: relative;
        margin:10px;
        border:1px solid black;
        overflow:hidden;
    }

    #a1 img{
            max-width:700px;
    }

    #a2{
        position: absolute;
        right:5%;
        bottom:5%;
        border:1px solid white;
        color:#fff;
        font-size:2em;
        background:rgba(0,0,0,0.7);
        padding:10px;
    }
</style>
<div id='a1'>
        <img src="https://lh3.googleusercontent.com/-kx0cklvaX2A/VBgtKrx6FWI/AAAAAAAAAG4/4ZERNAeA5HI/s931-fcrop64=1,06480000ffc9ffff/pZhc7Fq5oX8.jpg" />

     <div id='a2'>
            <div>Your Text is flexible width</div>
            <hr/>
            <div>other text here</div>
        </div>
    </div>

http://jsfiddle.net/2hynguq9/2/

гибкая ширина текста, регулируемая до div, наслаждайтесь

Ответ 5

Я понял, в чем была моя конкретная проблема, и подумал, что я упомянул об этом здесь, чтобы помочь другим отлаживать:

У меня есть два элемента: sup и span. У sup был отрицательный запас. Поскольку я делал отзывчивые контрольные точки, пролет не был действительно сосредоточен. Я должен был отрегулировать отрицательный запас для точки останова.

Ответ 6

Попробуйте использовать атрибут css "width: auto" в div:)

Ответ 7

На самом деле это отлично работает для меня. Но попробуйте добавить "display: inline;" к DIV.