Elementos de bloque CSS en una línea

Question

¿Cuál es la forma más común de tratar con una serie de elementos de bloque que deben estar en una línea (si JavaScript necesita poder modificar sus anchos, por ejemplo)? ¿Cuáles son los pros y los contras de aplicar float: izquierda a cada uno de ellos vs. usar posicionamiento para colocarlos?

Answer 1

Flotante sería mi elección, pero realmente depende de lo que desea lograr. Si puede proporcionar un ejemplo más específico, podría darle una razón clara sobre qué y por qué creo que debería usar. Sin embargo aquí hay una breve serie de pros y contras que he llegado al otro lado (estoy asumiendo que posicionando quiere decir posicionamiento absoluto):

ventajas de posicionamiento:

• posicionamiento muy preciso en relación a la siguiente ancestro marcada como posición relativa - permite una gran flexibilidad
• permite para los elementos estén en un orden diferente de lo que son visualmente en el DOM

contras de posicionamiento:

• Más difícil de alinear con otros elementos ya que el elemento posicionado ya no está en el flujo de documentos y también debido al nivel de precisión requerido.
• Otros elementos ignoran el elemento absolutamente posicionado, lo que significa que podría superponerse, a menos que tenga en cuenta el tamaño mínimo y máximo del elemento posicionado
• más difícil de implementar un pie de página si utiliza el posicionamiento absoluto para sus columnas.

pros float:

• muy fácil de construir diseños simples y avanzadas
• ningún problema de pie de página
• sin preocuparse por la precisión, el navegador se encarga de eso para usted
• tramos contenedor primario

Float contras:

• Un montón de trampas para aquellos con menos experiencia con diseños de flotador que pueden dar lugar a muchas preguntas que se hacen en SO :)

En cuanto a la clara: tanto elemento que Sebastián ha mencionado, hay una forma sencilla de evitar ese. Digamos que tienes un contenedor div y 2 divs flotantes adentro.

HTML:

<div id="con"> 
    <div class="float"></div> 
    <div class="float"></div> 
</div> 

CSS:

#con { background:#f0f; } 
.float { float:left; width:100px; height:100px; background:#0ff; } 

si se va a ejecutar este código se daría cuenta de que el contenedor div (el color magenta uno) es más que un solo píxel de alto, mientras que el los divs flotantes eran correctos, que es el problema que Sebastian mencionó. Ahora podría seguir su consejo y agregar un br o flotar el contenedor que no sería muy semántico, así que aquí hay una solución un poco más elegante. Solo agregue desbordamiento: oculto; al contenedor div como tal:

#con { background:#f0f; overflow:hidden; } 

Ahora su contenedor debe envolver los divs flotados correctamente.

Answer 2

El contenedor principal no se expande con ellos a menos que también se le asigne una etiqueta flotante o hay una br con claro: ambos; en el fondo.

Me gustaría ir con el flotador: izquierda en lugar de la posición. El navegador hace toda la alineación cuando un objeto se estira. Entonces hay menos para ti que te importe.

Answer 3

Creo que no colocaría explícitamente los elementos, sino que le indico al navegador que use un diseño en línea para los elementos que usan pantalla: en línea y deje que el navegador maneje el posicionamiento.

con respecto al flotador frente al posicionamiento, creo que la única manera de alinearlos usando posicionamiento es mediante el uso de posicionamiento absoluto, y eso significa que necesita manejar re-tamaños (del puerto de visualización del navegador) para mantener los elementos en su lugar .

Creo que al utilizar la propiedad float, el navegador maneja los problemas de redimensionamiento para usted y vuelve a representar el elemento en el lugar correcto.

Answer 4

La única desventaja de flotar en situaciones como esta para mí ha sido que tendrá que justificarlas o justificarlas a la derecha, el centrado no es una opción. Sin embargo, ha mencionado que está utilizando valores absolutos para los anchos, por lo que puede anidar todos los elementos flotados en un elemento DIV y agregar margen-derecha o margen-izquierda al DIV padre para simular la alineación central.

Answer 5

Bueno, si usted no está demasiado preocupado con navegadores antiguos (estoy mirando a ti, IE6) la mejor manera es ir con

display:inline-block; 

Básicamente, se crea un elemento de caja-modelo sin aclarar antes o después de eso, entonces permanece en la línea. Todos los navegadores modernos lo interpretan bien.