Ответ 1
Решено, хотя и не идеально с динамическими полями (рассчитанными для каждого элемента в js/php/whatever) и узкими элементами, требующими динамически рассчитанной высоты.
И снимок экрана:
Может ли кто-нибудь подумать о способе подхода к преобразованию следующей схемы в макет таблицы без таблицы?
Несколько вещей, о которых стоит упомянуть, возможно.
Спасибо заранее!
Решено, хотя и не идеально с динамическими полями (рассчитанными для каждого элемента в js/php/whatever) и узкими элементами, требующими динамически рассчитанной высоты.
И снимок экрана:
Хорошо.. это ОЧЕНЬ сложно:)..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 и их ширина/высота трудно справиться.
динамический текст = > ругань
используйте абсолютное позиционирование и разделите divs на zindex div
Определите шаблон CSS для добавления каждого компонента. Один для вертикальной части, а другой для горизонтальной части как L-формы невозможен напрямую и добавляет их в соответствии с вашим требованием динамически.
Я думаю, что у вас должна быть оболочка и внутри этого, вы должны объявить отдельный div для каждого текстового слоя. float, что осталось, и некоторые поля исправят это. Попробуйте объявить каждый div вложенным, чтобы divs могли соответственно расширяться.