html - sexuales - posicionar div css

Disposición HTML complicada

Question

¿Puede alguien pensar en una manera de enfocar la conversión del siguiente esquema en un diseño html que no sea de tabla?

Algunas cosas que vale la pena mencionar, tal vez.

• Solo el bloque central es obligatorio (y debe convertirse en un bloque cuadrado normal si es el único allí).
• El número total de bloques es impredecible, por lo que el diseño debería ser fácilmente expandible (y, por lo tanto, no de tabla).
• La alineación exacta a la izquierda del texto en todos los bloques no es crucial.
• No se permiten espacios distintos a los mostrados
• El fondo gris puede ser semitransparente, por lo que tampoco se permite la superposición.

¡Gracias por adelantado!

Answer 1

Creo que deberías tener un envoltorio y dentro de eso, debes declarar un div separado para cada capa de texto. Flotará eso a la izquierda y algunos márgenes lo arreglarán. Trate de declarar cada div anidado para que los divs puedan expandirse en consecuencia.

Answer 2

Defina una plantilla CSS para añadir cada componente. Uno para la parte vertical y el otro para la parte horizontal, ya que las formas en L no son posibles directamente y se agregan dinámicamente según sus necesidades.

Answer 3

Ok ... es MUY difícil :) ..btw, si el texto que contiene es ''estático'', podrías hacer algunos trucos con flotadores y márgenes negativos de esta manera:

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

Sé que no es el mejor resultado, pero podría ser una manera de comenzar :)

margen:

<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;
}

En este ejemplo, debe asignar alturas estáticas a los elementos de la izquierda. Además, los márgenes negativos de los elementos de la derecha también son estáticos.

texto estático => dimensiones estáticas / márgenes => un tipo de resultado extraño

Si el texto es dinámico, creo que lograr un resultado sin usar JS y / o tablas es casi imposible, también porque estos elementos ''L'' y sus anchos / alturas son difíciles de manejar.

texto dinámico => juramento

Answer 4

Resuelto, aunque no es perfecto con márgenes dinámicos (calculados para cada elemento en js / php / lo que sea) y los elementos estrechos que necesitan una altura calculada dinámicamente.

Y la captura de pantalla:

Answer 5

Utilice el posicionamiento absoluto y la capa de divs por el zindex del div