Тонкая компоновка HTML

Может ли кто-нибудь подумать о способе подхода к преобразованию следующей схемы в макет таблицы без таблицы?

Несколько вещей, о которых стоит упомянуть, возможно.

Только центральный блок обязательный (и должен стать нормальным квадратный блок, если он является единственным там).
Общее количество блоков непредсказуемо, поэтому макет должен быть легко расширяемым (и, следовательно, не-таблицей).
Точное выравнивание текста в тексте все блоки не имеют решающего значения.
Разрешены пробелы, кроме показанных
Серый фон может быть полупрозрачным, поэтому перекрытие не допускается.

Спасибо заранее!

Ответ 1

Решено, хотя и не идеально с динамическими полями (рассчитанными для каждого элемента в js/php/whatever) и узкими элементами, требующими динамически рассчитанной высоты.

И снимок экрана:

Ответ 2

Хорошо.. это ОЧЕНЬ сложно:)..btw, если текст внутри него "статический", вы можете сделать некоторые трюки с поплавками и отрицательными полями следующим образом:

http://www.jsfiddle.net/steweb/Xa5X6/

Я знаю, что это не лучший результат, но это может быть способ начать с:)

Разметка:

<div class="wrapper">
    <div class="column">
        <div id="sq-1"></div>
        <div id="rect-1"></div>
    </div>
    <div class="column">
        <div id="sq-2"></div>
        <div id="rect-2"></div>
    </div>
    <div class="column main">
        <div class="text-container-1">
            <div class="text-1">
                text 
            </div>
            <div class="text-2">
                text 
            </div>
        </div>
        <div class="text-3">text </div>
        <div class="text-4">text</div>
        <div class="text-5">text</div>
    </div>
</div>

CSS

.wrapper{
    overflow:hidden;
    background:#777;
    display:inline-block;
}
.column{
    float:left;
}
#sq-1{
    width:20px;
    height:21px;
}
#sq-2{
    width:20px;
    height:21px;
    margin-top:20px;
    border-top:2px solid #FFFFFF;
}
#rect-1{
    height:104px;
    border-right:2px solid #FFFFFF;
}
#rect-2{
    height:82px;
    border-right:2px solid #FFFFFF;
}

.text-container-1{
    width:200px;
    border-right:2px solid #FFFFFF;
}
.text-1, .text-2{
    border-bottom:2px solid #FFFFFF;
}
.text-3{
    float:left;
    width:220px;
    margin-top:-44px;
    padding-top:54px;
    padding-bottom:10px;
    border-bottom:2px solid #FFFFFF;
    border-right:2px solid #FFFFFF;
}
.text-4{
    float:left;
    width:240px;
    margin-left:-222px;
    margin-top:-44px;
    padding-top:84px;
    border-bottom:2px solid #FFFFFF;
    border-right:2px solid #FFFFFF;
}
.text-5{
    float:left;
    width:260px;
    margin-left:-242px;
    margin-top:-44px;
    padding-top:104px;
    border-bottom:2px solid #FFFFFF;
    border-right:2px solid #FFFFFF;
}

В этом примере вам нужно назначить статические высоты элементам слева. Более того, отрицательные поля элементов справа тоже статичны.

статический текст = > статические измерения/поля = > вид странного результата

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

динамический текст = > ругань

Ответ 3

используйте абсолютное позиционирование и разделите divs на zindex div

Ответ 4

Определите шаблон CSS для добавления каждого компонента. Один для вертикальной части, а другой для горизонтальной части как L-формы невозможен напрямую и добавляет их в соответствии с вашим требованием динамически.

Ответ 5

Я думаю, что у вас должна быть оболочка и внутри этого, вы должны объявить отдельный div для каждого текстового слоя. float, что осталось, и некоторые поля исправят это. Попробуйте объявить каждый div вложенным, чтобы divs могли соответственно расширяться.