Развернуть div до длины текста с элементами с абсолютным позиционированием

Я пытаюсь создать некоторые контейнеры div в столбце и которые имеют абзац внутри них разной длины.Развернуть div до длины текста с элементами с абсолютным позиционированием

Я хотел бы расширить div до правильной высоты, чтобы разрешить весь текст, однако, поскольку мои элементы установлены как positioned: absolute, я думаю, что это вызывает проблему.

Пожалуйста, смотрите мне скрипку: http://jsfiddle.net/p7pue2kx/1/

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

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

Заранее спасибо.

источник

2016-05-03 Chris Barlow

другой способ сделать это обычным способом ... я имею в виду, не используя позиционирование, если это не нужно – markoffden

Вместо того чтобы пытаться обойти предупреждение, которое вы видели при публикации ссылок на jsFiddle без кода в своем вопросе, выделив одно правило CSS, как насчет того, чтобы вы опубликовали [mcve ] в вашем вопросе? – j08691

Как вы, возможно, уже читали, не используйте абсолютное позиционирование, если это действительно не требуется. Итак, почему вы использовали абсолютное позиционирование? – Pjetr

Не использовать абсолютное позиционирование, где нет необходимости использовать его :)

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.masterContainer { 
 
    height: 800px; 
 
    background: blue; 
 
    width: 300px; 
 
} 
 
.container { 
 
    position: relative; 
 
    width: 100%; 
 
    background: yellow; 
 
    min-height: 60px; 
 
    margin: 10px 0px; 
 
    padding: 10px; 
 
} 
 
.summary { 
 
    clear: both; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    background: lightblue; 
 
} 
 
.id { 
 
    float: left; 
 
    background: green; 
 
} 
 
.xyz { 
 
    float: right; 
 
    background: red; 
 
}

<div class="masterContainer"> 
 
    <div class="container"> 
 
    <div class="id"> 
 
     KEY/ID 
 
    </div> 
 
    <div class="xyz">ABCD EFGH</div> 
 
    <div class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
 
    </div> 
 

 
    <div class="container"> 
 
    <div class="id"> 
 
     KEY/ID 
 
    </div> 
 
    <div class="xyz">ABCD EFGH</div> 
 
    <div class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> 
 
    </div> 
 

 
    <div class="container"> 
 
    <div class="id"> 
 
     KEY/ID 
 
    </div> 
 
    <div class="xyz">ABCD EFGH</div> 
 
    <div class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> 
 
    </div> 
 

 
</div>

источник

2016-05-03 14:33:37

Очень ценим. Теперь я вижу, где я ошибся! –

Всегда избегать абсолютного позиционирования, когда это возможно. Вот одно решение с минимальным CSS, чтобы выполнить то, что вы хотите.

CSS:

.masterContainer { 
    height: 800px; 
    background: blue; 
    width: 300px; 
} 
.container { 
    width: 300px; 
    background: yellow; 
    margin: 10px 0px; 
} 
.summary { 
    background: lightblue; 
    display: block; 
} 
.id { 
    background: green; 
} 
.xyz { 
    background: red; 
    float: right; 
}

HTML:

<div class="container"> 
    <span class="id"> 
    KEY/ID 
    </span> 
    <span class="xyz">ABCD EFGH</span> 
    <span class="summary"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    </span> 
</div> 

<div class="container"> 
    <span class="id"> 
    KEY/ID 
    </span> 
    <span class="xyz">ABCD EFGH</span> 
    <span class="summary"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </span> 
</div> 

<div class="container"> 
    <span class="id"> 
    KEY/ID 
    </span> 
    <span class="xyz">ABCD EFGH</span> 
    <span class="summary"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    </span> 
</div> 

</div>

Fiddle

источник

2016-05-03 14:42:17 NotJustin

Развернуть div до длины текста с элементами с абсолютным позиционированием

ответ

Смежные вопросы