Estoy tratando de hacer un diseño de 2 columnas, aparentemente la pesadilla de CSS. Sé que no deberías usar tablas para el diseño, pero me he decidido por este CSS. Tenga en cuenta el uso de la pantalla: mesa, etc.¿Es un mal uso "display: table;" para organizar un diseño en 2 columnas?
div.container {
width: 600px; height: 300px; margin: auto;
display: table; table-layout: fixed;
}
ul {
white-space: nowrap; overflow: hidden;
display: table-cell;
width: 40%;
}
div.inner {
display: table-cell;
width: auto;
}
Con este diseño:
<div class="container">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div class="inner">
<p>Hello world</p>
</div>
</div>
Esto parece funcionar de manera admirable. Sin embargo, no puedo evitar preguntarme: ¿estoy obedeciendo la regla de "no usar tablas", pero no el espíritu? Creo que está bien, ya que no hay marcado de posicionamiento en el código HTML, pero no estoy seguro de la forma "correcta" de hacerlo.
No puedo usar css float, porque quiero que las columnas se expandan y contraigan con el espacio disponible.
Por favor, desbordamiento de pila, ayúdame a resolver mi sentido existencial del temor en estas pseudo-tablas.
La sopa de etiquetas en realidad no se refiere tanto a las marcas demasiado como a las marcas no válidas o descuidadas. La forma en que se implementan las tablas CSS significa que * podría * potencialmente escribir tanto como, o incluso más detallado que, si usara tablas, eso normalmente no es una preocupación. La única razón por la que siento que alguien necesita es la # 1. En cuanto a IE7 e IE6, para aclarar, ambos no admiten tablas CSS de ninguna manera. IE8 sí, con errores que son comparables a casi cualquier otro navegador (aunque hilarantemente con [al menos una regresión en versiones posteriores] (http://stackoverflow.com/a/24693779)). – BoltClock
, pero ¿qué pasa con el soporte del navegador? o diseño receptivo? o una mejor manera? –