Previene il float lasciato div da passare a una nuova riga

Question

Ho 4 div che sono impostati per flottare a sinistra ma il div di fine continua a confezionare due una nuova riga su uno schermo più piccolo che mi infastidisce davvero ... voglio che scalino con le dimensioni dello schermo in modo che rimangano sempre sulla stessa linea indipendentemente dalle dimensioni dello schermo ... e sto cercando di non usare un tavolo (che è molto allettante, dato che v.reliable per questo !!!)

I'm chiedendo come risolvere questo fastidioso problema in modo che rimangano sempre in posizione indipendentemente dalle dimensioni dello schermo ??

ho questo come il mio 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; 
} 

mio 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> 

Please help: D

Answer 1

Hi penso che si dovrebbe questo controllo a questa 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

Si può provare a rimuovere la regola di visualizzazione table-cell dalla confezione e impostazione di percentuali (o min-larghezze) sulle div alfine come questa jsFiddle example.

Answer 3

Questo dovrebbe fare il trucco:

<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> 

e che sarà supportato su qualsiasi browser. http://jsfiddle.net/5GrKU/3/

Answer 4

Il wrapper è un contenitore di larghezza percentuale con 4 elementi figlio a larghezza fissa flottati.

La larghezza del wrapper dipende dalla larghezza del viewport. Se la finestra viene ristretta al punto che la larghezza del wrapper è inferiore a quella delle 4 larghezze dell'elemento figlio, allora naturalmente non si adatteranno tutte e quindi si avvolgeranno.

La soluzione è quella di assicurarsi che il wrapper non diventi più piccolo della combinazione dei bambini.

Quindi, sommare con larghezze, bordi e margini degli elementi figlio e quindi assegnare al wrapper un attributo uguale a min-width.

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; 
} 

per voi riferimento Ho anche aggiunto l'URL della demo. http://jsfiddle.net/sg8FE/

UPDATE

basta cambiare display:inline in classe wrapper per display:block resto tutto è giusto e di sono centrati i div.

Answer 6

dando una larghezza fissa nelle div interiore si stanno costringendo loro di avere che la larghezza non importa quale sia la dimensione della porta di visualizzazione. E dando al div esterno una larghezza dell'80% stai riducendo le sue dimensioni con la larghezza della tua vista. Devi dare una larghezza fissa a tutte quelle div o dare una larghezza relativa a tutti.

Answer 7

Anche se questo è un vecchio post, penso che il problema, che ho anche incontrato, è il fatto che si desidera che tutte queste celle abbiano una dimensione fissa, e non%, giusto? La soluzione si è scelto cambiato formato iniziale in cui si è specificato width:200px;

Beh, vorrei suggerire di guardare qui: http://jsfiddle.net/gn2bg/

L'unica cosa che ho fatto è quello di aggiungere involucro interno intorno le cellule:

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

e nuova HTML come questo:

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

notate che il vostro involucro richiede l'80% dello spazio. L'avvolgitore, tuttavia, indica che la sua dimensione è fissa - 830px (totale di tutte le dimensioni div interne più spazio per imbottitura.) In questo modo, il wrapper utilizza i gomiti per allungare la larghezza e sostituisce questi 80% di "wrapper"

Capisco che abbia già preso una decisione su quale sia la soluzione migliore. Lascio questa risposta a chiunque altro in futuro che abbia bisogno di una risposta esatta alla tua domanda esatta.