para - CSS ¿Alineación de tipo tabla sin usar tablas?(CSS RelativeLayout)

table html

Question

Dondequiera que vaya a Internet, constantemente me están pidiendo que no use las Tablas. Lamentablemente, soy uno de los pocos programadores que es lo suficientemente terco como para seguir usándolos. Francamente, encuentro que las características de alineación y diseño de CSS son inadecuadamente potentes para mí, frío, no uso las tablas. Con mi idiosincrasia de programador personal a un lado, me gustaría intentar atacar a uno de mis principales descontentos con el sistema CSS:

Digamos que quiero tener un diseño como este:

+---+---+
| A | B |
+---+---+
| C | D |
+---+---+

En el ejemplo anterior, me gustaría que los anchos de A y C fueran iguales, y que los anchos de B y D permanezcan iguales.

También me gustaría que las alturas de A y B permanecieran unidas, y me gustaría que las alturas de C y D se mantuvieran iguales.

Para aclarar, si algún elemento de una columna se ensancha, me gustaría que todos los elementos de esa columna se ensancharan. Y si cualquier elemento en una fila se vuelve más alto, yo, nuevamente, quiero que todos los elementos en esa misma fila también se ensanchen.

Lo que acabo de describir es la funcionalidad exacta de nuestro viejo amigo, la mesa. En mi opinión, las tablas son muy útiles para este tipo de diseños. Si tuviera que intentar algo similar al uso de diseños CSS, podría obtener algo como esto:

+-------+---+
|   A   | B |
+---*---*---+
| C |   D   |
+---+-------+

Lo que NO sería el tipo de diseño que estoy buscando. ( A y C hacen columnas irregulares, en lugar de columnas perfectas y suaves como preferiría)

Para poner mi problema de manera simple, realmente podría usar una manera de, al usar diseños de CSS (y NO a anchos o alturas predefinidos) alinear la posición de un borde de un cuadro CSS, a la posición de un borde de un cuadro CSS diferente. Si CSS fuera compatible con esa característica simple, instantáneamente podría dejar de lado las tablas y crear diseños más allá incluso de las capacidades de las tablas. Un buen ejemplo, pero inútil, de tal poder serían dos cajas desconectadas en lados opuestos de una mesa, compartiendo dinámicamente exactamente la misma altura y posición vertical entre sí.

Pero desafortunadamente, en mis búsquedas en Internet, la alineación más avanzada que he encontrado hasta ahora es la alineación central, izquierda y derecha. Todos los tipos de alineación que no son relativos a OTROS elementos, haciéndolos inútiles.

¡Todo lo que quiero es solo una forma de alinear los elementos HTML con OTROS elementos HTML sin tener que usar tablas!

EDITAR

Mientras seleccionaba las etiquetas para esta pregunta, encontré una descripción que lo resume todo:

Relativelayout: un diseño donde las posiciones de los hijos se pueden describir en relación con los demás o con el padre.

¿Hay un CSS RelativeLayout? ¿O estoy atascado usando tablas cuando quiero hacer esto?

Aceptaré la respuesta que se acerque más a mi funcionalidad deseada sin usar anchos o alturas predeterminados (incluida la respuesta "Nada de eso existe" si nadie más proporciona algo mejor).

Answer 1

Creo que para usar CSS puro, sin Width , y sin usar table , puedes usar Flex Layout

Este es el codigo

HTML

<section class="flexrow">
    <div class=''item''>1asdf</div>
    <div class=''item''>2</div>
</section>
<section class="flexrow">
    <div class=''item''>1</div>
    <div class=''item''>2</div>
</section>

CSS

.flexrow {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    margin-bottom: 10px;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-flex: none;
    -moz-flex: none;
    -ms-flex: none;
    -o-flex: none;
}
.item {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    margin: auto 10px;
    border-radius: 5px;
    border:1px solid black;
}

Aquí está el JsFiddle

Answer 2

Es posible mostrar elementos como tablas que no son tablas semánticas, solo usando CSS. Usando la propiedad de display , puedes imitar tablas mientras tienes divs en tu marca. Revisa este artículo .

Dependiendo de lo que quieras lograr, hay algunas opciones alternativas. Si solo desea que las dos filas de cada columna se adhieran al ancho de la columna, debe intentar colocar las filas dentro de la etiqueta de la columna en lugar de hacer lo contrario. Esto está funcionando sin dimensiones predefinidas.

Además, si las alturas se establecen de la misma manera para cada celda en una fila, simplemente puede hacerlas flotar a la izquierda y establecer el ancho del contenedor en la suma del ancho de la fila. Esto solo funciona con dimensiones predefinidas.

CSS

div.c
{
    width: 100%;
}

div.c>div:nth-child(2n-1)
{
    width: 25%;
    float: left;
    background: blue;
}

div.c>div:nth-child(2n)
{
    width: 75%;
    float: left;
    background: yellow;
}

Aquí hay un violín: http://jsfiddle.net/kdani3/DbRuV/

Un ejemplo más complejo: http://jsfiddle.net/kdani3/DbRuV/1/

Creo que es realmente simple, incluso más simple que usar un diseño de tabla.

Además, realmente te recomiendo que eches un vistazo a los marcos de cuadrícula CSS, como Twitter Bootstrap . Eso definitivamente vale la pena echarle un vistazo.