Вопросы Теги

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

Довольно странный пример, но вот он:

Как мне получить абсолютно позиционированный 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). Мы очень ценим любые примеры / ресурсы.

Ура, Sapiensgladio

5
задан sapiensgladio 13 July 2011 в 22:08
поделиться