div с неопределенной шириной (абсолютное позиционирование)

Question

У меня есть абсолютно позиционированный 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;
}

Спасибо

Answer 1

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

white-space: nowrap;

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

Answer 2

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

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

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

Answer 3

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

display: table;

Answer 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, наслаждайтесь

Answer 5

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

Например,

<div class="wrapper">
    <div class="my-div"></div>
</div>

И CSS,

.wrapper {
    position: absolute;
    width: 500px;
}

.my-div {
    position: absolute;
    whitespace: pre-wrap;
}

Вы можете добавить пробел: предварительная перенос, чтобы разрешить перенос строк, что делает его более гибким, чем сейчасрешение.

Answer 6

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

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

Answer 7

Это на самом деле работает нормально для меня. Но попробуйте добавить display: inline; в div.

Answer 8

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