div с неопределенной шириной (абсолютное позиционирование)
8 ответов
Элементы уровня блока расширяются вертикально , чтобы удерживать их содержимое, но расширяются горизонтально , чтобы заполнить их контейнер. Поскольку вы используете абсолютное позиционирование, семантика «заполнения контейнера» немного меняется.
Обычно браузеры пытаются заполнить оставшееся горизонтальное пространство браузера, если ширина не была указана (или когда ширина равна 'auto', ширина по умолчанию), поэтому то, что вы описываете, звучит странно. Скорее всего, что-то еще мешает элементу вызвать такое поведение (например, относительно или абсолютно позиционированный элемент где-то в родительской цепочке).
Я попытался бы отладить это, посмотрев, можно ли повторить поведение с div корневого уровня (если вы этого еще не сделали), чтобы исключить вероятность возникновения проблем у родительских элементов.
Попробуйте добавить:
white-space: nowrap;
в ваш фиксированный div. Однако помните, что это решение не приведет к переносу строк, когда div меньше ширины окна.
На абсолютно позиционированном элементе добавить:
display: table;
У меня есть для этого решение:
<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 наслаждайтесь
Я выяснил, в чем заключалась моя конкретная проблема, и решил упомянуть ее здесь, чтобы помочь другим отладить:
У меня есть два элемента, sup и span. У супа была отрицательная разница. Поскольку я делал отзывчивые контрольные точки, промежуток не был действительно центрирован. Мне пришлось скорректировать отрицательную границу sup для точки останова.
Это на самом деле работает нормально для меня. Но попробуйте добавить display: inline; в div.
Я решил эту проблему, добавив div-обертку, которая также абсолютно позиционирована, с шириной, на которую я хочу увеличить свой div.
Например,
<div class="wrapper">
<div class="my-div"></div>
</div>
И CSS,
.wrapper {
position: absolute;
width: 500px;
}
.my-div {
position: absolute;
whitespace: pre-wrap;
}
Вы можете добавить пробел: предварительная перенос, чтобы разрешить перенос строк, что делает его более гибким, чем теперь решение.
Попробуйте использовать атрибут css «width: auto» в div:)