fancy - Flotadores CSS: ¿cómo los mantengo en una línea?

title tag html5

Question

Quiero tener dos elementos en la misma línea usando ''float: left'' para el elemento de la izquierda.

No tengo problemas para lograr esto solo. El problema es que quiero que los dos elementos permanezcan en la misma línea, incluso cuando redimensionas el navegador muy pequeño . Ya sabes ... como fue con las tablas.

El objetivo es evitar que el elemento a la derecha se ajuste, pase lo que pase.

Entonces, ¿cómo le digo al navegador usando css que prefiero estirar el div que contiene a envolverlo de manera que el float: right; div está por debajo del float: left; div?

ejemplo: lo que quiero:

                                             /
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          /
 |               |  |                        /
 |               |  |content stretching      /   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------/
                                             /

Answer 1

¿Está seguro de que los elementos flotantes a nivel de bloque son la mejor solución para este problema?

A menudo, con las dificultades de CSS en mi experiencia, resulta que la razón por la que no puedo ver la manera de hacer lo que quiero es que me he quedado atrapado en una visión de túnel con respecto a mi marca (pensando "cómo puedo hacer esto ¿Los elementos hacen esto ? ") en lugar de volver atrás y ver qué es exactamente lo que necesito lograr y quizás volver a trabajar mi html para facilitarlo.

Answer 2

Añade esta línea a tu selector de elementos flotados

.floated {
    float: left;
    ...
    box-sizing: border-box;
}

Evitará que el relleno y los bordes se agreguen al ancho, por lo que el elemento siempre permanecerá en la fila, incluso si tiene, por ejemplo. Tres elementos con ancho de 33.33333%.

Answer 3

Cuando el usuario reduce el tamaño de la ventana horizontalmente y esto hace que los flotadores se apilen verticalmente, elimine los flotantes y en el segundo div (que era un flotador) use margin-top: -123px (su valor) y margin-left: 444px (su valor) para Posiciona los divs como aparecieron con flotadores. Cuando se hace de esta manera, cuando la ventana se estrecha, el div del lado derecho permanece en su lugar y desaparece cuando la página es demasiado estrecha para incluirla. ... lo que (para mí) es mejor que tener el div del lado derecho "saltando" por debajo del div del lado izquierdo cuando la ventana del navegador está limitada por el usuario.

Answer 4

Envuelva sus flotadores en un div con un ancho mínimo mayor que el ancho combinado + margen de los flotadores.

No se necesitan hacks o tablas HTML.

Answer 5

Envuelve tus <div> s flotantes en un contenedor <div> que usa este truco de ancho de ancho de navegador cruzado:

.minwidth { min-width:100px; width: auto !important; width: 100px; }

Es posible que también debas configurar "desbordamiento" pero probablemente no.

Esto funciona porque:

• La declaración !important , combinada con min-width hace que todo permanezca en la misma línea en IE7 +
• IE6 no implementa min-width , pero tiene un error tal que width: 100px anula la declaración !important , lo que hace que el ancho del contenedor sea de 100px.

Answer 6

La forma en que resolví esto fue usar algo de jQuery. La razón por la que lo hice de esta manera fue porque A y B tenían porcentajes de ancho.

HTML:

<div class="floatNoWrap">
    <div id="A" style="float: left;">
        Content A
    </div>
    <div id="B" style="float: left;">
        Content B
    </div>
    <div style="clear: both;"></div>
</div>

CSS:

.floatNoWrap
{
    width: 100%;
    height: 100%;
}

jQuery:

$("[class~=''floatNoWrap'']").each(function () {
    $(this).css("width", $(this).outerWidth());
});

Answer 7

Otra opción es, en lugar de flotar, establecer la propiedad de espacio en blanco nowrap en un div padre:

.parent {
     white-space: nowrap;
}

y reinicie el espacio en blanco y use una pantalla de bloque en línea para que los divs permanezcan en la misma línea pero aún así puede darle un ancho.

.child {
    display:inline-block;
    width:300px;
    white-space: normal;
}

Aquí hay un JSFiddle: https://jsfiddle.net/9g8ud31o/

Answer 8

Otra opción: no flotar su columna derecha; simplemente dale un margen izquierdo para moverlo más allá del flotador. Necesitarás uno o dos trucos para arreglar IE6, pero esa es la idea básica.

Answer 9

Recomendaría usar tablas para este problema. Estoy teniendo un problema similar y siempre que la tabla solo se use para mostrar algunos datos y no para el diseño de la página principal está bien.

Answer 10

Solución 1:

pantalla: tabla-celda (no ampliamente soportada)

Solución 2:

mesas

(Odio los hacks).