Impedir float left div ir a una nueva línea

Question

Tengo 4 divs que están configurados para flotar a la izquierda pero el div final sigue envolviendo dos líneas nuevas en una pantalla más pequeña que realmente me molesta ... quiero que escalen con el tamaño de la pantalla para que siempre permanezcan en la misma línea sin importar el tamaño de la pantalla ... y estoy tratando de no usar una tabla (lo cual es muy tentador para mí.)

Estoy preguntándose cómo solucionar este problema molesto para que siempre permanezcan en su posición independientemente del tamaño de la pantalla?

Tengo esto como mi CSS:

.wrapper{ 
    margin:0 auto; 
    width: 80%; 
    display: table-cell; 
} 
.gridf{ 
    float:left; 
    margin-right:3px; 
    width:200px; 
    min-height:200px; 
    border:1px solid white; 
} 
.grid{ 
    float:left; 
    margin-left: 3px; 
    margin-right:3px; 
    width:200px; 
    min-height:200px; 
    border:1px solid white; 
} 
.gridl{ 
    float:left; 
    margin-left: 3px; 
    width:200px; 
    min-height:200px; 
    border:1px solid white; 
} 

Mi HTML:

<div style="overflow: hidden;"> 

<div class="wrapper"> 

     <div class="gridf"></div> 
     <div class="grid"></div> 
     <div class="grid"></div> 
     <div class="gridl"></div> 

</div> 



</div> 

Por favor, ayuda: D

Answer 1

Hola Creo que deberías esta comprobación a esta demo

.wrapper { 
 
    margin: 0 auto; 
 
    width: 80%; 
 
    border: solid 1px red; 
 
    overflow: hidden; 
 
} 
 
.gridf, 
 
.grid, 
 
.gridl { 
 
    Background: green; 
 
    width: 24%; 
 
    min-height: 100px; 
 
    float: left; 
 
    margin: 2px 0; 
 
} 
 
.gridf {} .grid { 
 
    margin: 2px 1%; 
 
} 
 
.gridl { 
 
    background: yellow; 
 
}

<div class="wrapper"> 
 

 
    <div class="gridf">One</div> 
 
    <div class="grid">Two</div> 
 
    <div class="grid">Three</div> 
 
    <div class="gridl">Four</div> 
 

 
</div>

Answer 2

Usted puede intentar quitar la regla de visualización-celda de la tabla de la envoltura y establecer porcentajes (o min-width) en los divs secundarios como este jsFiddle example.

Answer 3

Que debe hacer el truco:

<div class="wrapper"> 
    <div style="width:850px"> 
     <div class="gridf"></div> 
     <div class="grid"></div> 
     <div class="grid"></div> 
     <div class="gridl"></div> 
    </div> 
</div> 

Y que se apoyará en cualquier navegador. http://jsfiddle.net/5GrKU/3/

Answer 4

Su contenedor es un contenedor de ancho porcentual con 4 elementos secundarios de ancho fijo flotando.

El ancho del contenedor depende del ancho de la ventana gráfica. Si la ventana gráfica se reduce al punto en que el ancho de la envoltura es menor que el ancho de los 4 elementos hijos juntos, entonces naturalmente no todos encajarán y, por lo tanto, se ajustarán.

La solución es asegurarse de que su envoltura no sea más pequeña que la combinación de los niños.

Por lo tanto, sume el ancho, los bordes y los márgenes de los elementos secundarios y proporcione a la envoltura un atributo min-width igual a eso.

Answer 5

HTML

<div style="overflow: hidden;"> 

<div class="wrapper"> 

     <div class="gridf"></div> 
     <div class="grid"></div> 
     <div class="grid"></div> 
     <div class="gridl"></div> 

</div> 

</div> 

CSS

.wrapper{ 
    margin:0 auto; 
    width: 80%; 
    display: inline; 
} 
.gridf{ 
    float:left; 
    margin-right:3px; 
    width:20%; 
    min-height:200px; 
    border:1px solid red; 
} 
.grid{ 
    float:left; 
    margin-left: 3px; 
    margin-right:3px; 
    width:20%; 
    min-height:200px; 
    border:1px solid red; 
} 
.gridl{ 
    float:left; 
    margin-left: 3px; 
    width:20%; 
    min-height:200px; 
    border:1px solid red; 
} 

para usted referencia también he añadido la URL de la demo. http://jsfiddle.net/sg8FE/

ACTUALIZACIÓN

acaba de cambiar display:inline en clase contenedora a display:block resto todo es correcto y se centran los div de.

Answer 6

dando un ancho fijo en su divs internos se les está obligando a tener ese ancho no importa cuál es el tamaño del puerto de vista. Y al darle al div externo un ancho del 80%, está reduciendo su tamaño con el ancho de su puerto de visualización. Debes hacer un ancho fijo para todos los divs o dar un ancho relativo a todos.

Answer 7

Aunque esta es una publicación anterior, creo que el problema, que también encuentro, es el hecho de que desea que todas estas celdas sean de un tamaño fijo, y no%, ¿no? La solución que eligió cambió el formato inicial en la que ha especificado width:200px;

Bueno, yo sugeriría que mirar aquí: http://jsfiddle.net/gn2bg/

el único que he hecho es añadir envoltura interior alrededor de sus células:

.inwrapper{ 
    float:left; 
    overflow: hidden; 
    min-width: 830px; 
} 

y el nuevo hTML como este:

<div class="wrapper"> 
    <div class="inwrapper"> 
    <div class="gridf"></div> 
    <div class="grid"></div> 
    <div class="grid"></div> 
    <div class="gridl"></div> 
    </div> 
</div> 

Aviso de que la envoltura requiere el 80% del espacio. El inwrapper, sin embargo, dice que su tamaño es fijo - 830px (total de todos los tamaños de div internos más espacio para relleno) De esta forma, inwrapper usa 'codos' para estirar el ancho y anula el 80% de 'envoltura'

Entiendo que ya tomó una decisión sobre cuál es su mejor solución. Dejo esta respuesta a cualquier otra persona en el futuro que necesite una respuesta exacta a su pregunta exacta.