Абсолютное Поведение Блоков

Question

У меня есть следующий фрагмент HTML:

Block 1:
<div style="position: absolute; top: 105px; left: 15px;">
    <div style="float: left; width: 50px; height: 40px;"></div>
    <div style="float: left; width: 100px; height: 20px;"></div>
</div>

Block 2:
<div style="position: relative; width: 60px; height: 20px;">
    <div style="position: absolute; top: 15px; left: 15px;">
        <div style="float: left; width: 50px; height: 40px;"></div>
        <div style="float: left; width: 100px; height: 20px;"></div>
    </div>
</div>

Блок 1 - это обычный DIV с абсолютным позиционированием, в то время как в блоке 2 тот же DIV заключен в DIV с относительным позиционированием.

Моя проблема состоит в том, что в блоке 2 абсолютный DIV наследует свойство width от своего родителя, таким образом отображая дочерние DIV друг над другом. Сравните это с блоком 1, где дочерние DIVs правильно расположены рядом (поскольку назначена максимально допустимая ширина).

Есть ли какое-нибудь исправление для этой ситуации? Указанные высота и ширина являются произвольными и могут изменяться в любое время. Дочерние DIV не должны устанавливать ширину, потому что содержимое постоянно меняется (я привожу некоторые здесь для иллюстрации). Я могу установить определенную ширину, но люди с разными браузерами и настройками DPI продолжают получать разные результаты, поэтому лучше не задавать ширину дочерних DIV.

Обновление для награды :

Предполагаемое использование приведенного выше HTML аналогично следующему:

Block 2:
<div id="main" style="position: relative; width: 60px; height: 20px;">
    Main Text
    <div id="columncontainer" style="position: absolute; top: 20px; left: 0px; width: 100px;">
        <div id="leftcolumn" style="float: left;">
                Item 1: Left Column, Line 1<br />
                Item 2: Left Column, Line 2<br />
                Item 3: Left Column, Line 3<br />
        </div>
        <div id="rightcolumn"  style="float: left;">
                Item 4: Right Column, Line 1<br />
                Item 5: Right Column, Line 2<br />
        </div>
    </div>
</div>

Примечания:

• Ширина левого столбца и #rightcolumn не является статической, поэтому конкретная ширина не может быть установлена. Ширина должна следовать за самым длинным текстом (каждый элемент в одной строке).

• Я могу установить ширину #columncontainer определенной ширины (что я сейчас и делаю), но если текст слишком длинный, то левый-правый столбец испорчен (#rightcolumn ниже #leftcolumn, что правильно, потому что недостаточно места).

• Основная ширина установлена ​​на определенную ширину, которая во всех возможных случаях будет намного меньше ширины #columncontainer.

• Я открыт для решения JS, поскольку это может показаться единственным последовательным решением, которое я могу придумать.

Answer 1

В Блок 2 , абсолютно позиционированный div не наследует свою ширину строго от своего родителя. Если бы это было так, установка его ширины на auto могла бы помочь. Вместо этого, его относительно позиционированный родительский элемент стал « содержащим блок », устанавливая контекст, в котором, так сказать, живет абсолютный div.

Единственный способ «разорвать» этот содержащий блок - установить ширину на нем, чтобы он переполнялся, как вы это делали. Если вы установите для этой ширины значение, которое обычно будет достаточно хорошим, вы можете дополнительно контролировать поведение поплавков внутри нее, задав для них значения (в процентах) min-width и max-width.

Но вам действительно нужно, чтобы дивизион #columncontainer находился внутри #main, кроме как для позиционирования его относительно координат #main?

Вместо этого вы можете сделать их родными братьями в общем родительском div (остальная часть CSS остается прежней):

<div style="position: relative">
    <div id="main">...</div>
    <div id="columncontainer">...</div>
</div>

Answer 2

Ширина двух внутренних делителей 50 и 100 шире, чем вмещающий делитель на 60 пикселей. Нужно ли устанавливать вложение div в 60px? Если вы удалите ограничение ширины и высоты, то при необходимости внутренние div будут появляться рядом друг с другом. В противном случае установите для ширины элемента div значение больше 60, скажем, 110px, чтобы у внутренних элементов div было место для соседства.

Answer 3

Я думаю, что лучший способ сделать это вместо определения ширины в пикселях, сделать это в процентах. Что произойдет, если вы установите для каждого 50% (или 49%), они оба будут рядом друг с другом. Учитывая, что самое большое, что может получить контент, составляет 100%, каждому 50% должно сработать хорошо, если только одна сторона иногда не будет больше другой.

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