template - css jquery mobile

Pon el formulario de inicio de sesión a la derecha de la página

Question

Aquí está mi jsFiddle . A pesar de que estoy aplicando esta regla

#login {
    float: right;
}

el formulario permanecerá al lado del enlace del Leaderboard. En un dispositivo móvil, esto no es un problema, ya que todo se mostrará en una sola columna, pero en un escritorio me gustaría que el logotipo esté en la posición más a la izquierda, el cuadro de texto y la tabla de posiciones estén en el centro y el inicio de sesión la posición más a la derecha.

¿Qué me estoy perdiendo?

Tenga en cuenta que con el logotipo real todo está bien (con respecto al logotipo), por lo que debe ignorar el efecto desagradable que tiene el logotipo vinculado en el ejemplo.

Answer 1

Display flex se aplica al elemento principal ( ui-block-solo ). Sería mejor no usar visualización flexible, alineación flotante y posición absoluta al mismo tiempo.

Si elige mantener flexible la pantalla, puede usar la alineación flexible; puede leer más aquí https://css-tricks.com/snippets/css/a-guide-to-flexbox/ .

Si hay alineación de flotación y posición absoluta, se aplicará la posición absoluta. Además, si prefiere la alineación flotante o la posición absoluta, debe usar consultas de medios para dispositivos móviles.

Answer 2

Estás usando display: flex en el div principal .ui-block-solo . Float no tiene ningún efecto sobre los elementos flexibles.

Answer 3

Intenta usar el sistema de grillas de Bootstrap para posicionar tus elementos. http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Por ejemplo, puede tener algo como esto: http://www.codeply.com/go/UVfJSRytc2

El sistema de cuadrícula de FYI Bootstrap es realmente fácil de usar y le ahorra mucho tiempo al trabajar con CSS simple. Con la cuadrícula, realmente divide la pantalla en filas y columnas y puede colocar fácilmente sus elementos en cualquier lugar que desee. Sugiero que lo eche un vistazo para referencia futura :)