CSS - Включить «автоматическое расширение» абсолютно позиционированного DIV, когда содержимое выходит за пределы параметров ширины / высоты - PullRequest
Новая
       8

CSS - Включить «автоматическое расширение» абсолютно позиционированного DIV, когда содержимое выходит за пределы параметров ширины / высоты

5 голосов
/ 14 июля 2011

Какой-то странный пример, но здесь идет речь:

Как мне получить абсолютно позиционированный DIV для расширения при вставке контента, который выходит за его границы? Вот код: 

<html>
<head>
    <style>
        * {margin: 0; padding: 0;}
        body {white-space: nowrap; text-align: center; color: white; font-size: 2em;}
        div#container {position: relative; height: 100px; width: 50px;}

        div#a {height: 50px; width: 25px; background-color: red; position: absolute; top: 0; left: 0;}
        div#b {height: 50px; width: 25px; background-color: blue; position: absolute; top: 0; right: 0}
        div#c {height: 50px; width: 25px; background-color: orange; position: absolute; bottom: 0; left: 0;}        
        div#d {height: 50px; width: 25px; background-color: purple; position: absolute; bottom: 0; right: 0;}

        span#title {position: relative; overflow: visible}
    </style>
</head>
<body>
    <div id="container">
        <div id="a"><span id="title">This is my title</span></div>
        <div id="b">B</div>
        <div id="c">C</div>
        <div id="d">D</div>
    </div>
</body>

В приведенном выше примере содержимое в DIV "a" скрыто (из-за ограничений ширины / высоты). Если мы установим это в «min-height» и «min-width», контент просто «отстает» от других div, но не будет их перемещать. Как я могу сделать это?

Примечание: я пытаюсь понять это, так как мне нужно «изменить» порядок, в котором упорядочены DIV в HTML (я пытаюсь сделать дочерний шаблон в Wordpress). Любые примеры / ресурсы приветствуются.

Cheers, Sapiensgladio

1 Ответ

7 голосов
/ 14 июля 2011

Вы можете использовать min-height и min-width, чтобы определить минимальные значения для этих измерений, которые будут расширены для размещения нового / дополнительного / большего контента по мере необходимости.

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

Пример CSS: 

#content {
    position: absolute;
    min-height: 5em;
    max-height: 15em;
    min-width: 5em;
    max-width: 15em;
    border: 1px solid #f90;
    bottom: 0.5em;
    right: 0.5em;
    overflow: auto;
}

JS Fiddle demo .

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...