Devo aggiungere un pixel al div genitore

Question

Ho un div per "classe" che contiene div per ogni "studente". Ogni div "studente" contiene un'immagine. Ecco il codice HTML:

<div class="classroom"> 
    <div class="student"> 
     <img class="student-image" src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/f.AmzRdUdc4pEtCuGvU03WXQ.jpg"> 
    </div> 

    <div class="student"> 
     <img class="student-image" src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/k.jXX55KhHUWZGTAb-GpPkdg.jpg"> 
    </div> 

    <div class="student"> 
     <img class="student-image" src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/c.ZKQXc2Kc8-po-OK6AhDbtw.jpg"> 
    </div> 
</div> 

Voglio visualizzare tutti gli "studenti" div in una linea in modo da utilizzare il seguente CSS:

body { 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
} 

html, body { 
    height: 100%; 
} 

.classroom { 
    position: relative; 
    height: 100%; 
} 

.classroom .student { 
    position: relative; 
    height: 100%; 
    float: left; 
} 

.classroom .student .student-image { 
    height: 100%; 
} 

Per gli studenti avranno abbastanza posto nella " classe" div, io uso jQuery per la calcolare la larghezza della 'classe':

$(document).ready(function() { 
    var w = 0; 
    $(".student").each(function() { 
     w += $(this).width(); 
    }); 
    $(".classroom").width(w); 
}); 

Purtroppo il risultato non è quello che mi aspettavo. L'ultimo div "studente" scende alla riga successiva (come se non fosse stato assegnato float: left;). Più strano è che quando si aumenta la larghezza del div "Classroom" in 1 pixel, il div ritorna alla sua posizione alla fine della prima riga.
Ho fatto quelle jsfiddles: Qui http://jsfiddle.net/U3gBG puoi vedere il problema. fare clic sul pannello dei risultati e utilizzare i tasti freccia per scorrere verso il basso e verso destra.
Qui http://jsfiddle.net/U3gBG/1/ è possibile vedere il risultato dell'aggiunta di 1 alla larghezza del div "classe" dopo il calcolo (la larghezza di "classe" è uguale alla somma della larghezza "studenti" più 1 pixel). Questo risultato è ciò di cui ho bisogno.
Non capisco perché devo aumentare la larghezza del div principale di 1? Perché sommare tutta la larghezza del div figlio non è sufficiente?

Answer 1

Quindi, in base al commento di Eyal, sono diventato curioso di sapere cosa sta succedendo alla radice di questo problema. Sul mio sistema ho notato che Chrome si è bloccato, ma IE e FF no. Dopo ulteriori scavi ho scoperto che il wrapping era dovuto all'area dello schermo renderizzata.

Si sta dimensionando il genitore utilizzando jQuery, ma quando si divide per tre si otterrà l'arrotondamento. In alcuni casi, un arrotondamento verso il basso fa sì che il contenitore sia troppo stretto per le immagini e per il terzo involucro. Se si arrotonda, si ha spazio sufficiente e non si verificano avvolgimenti.

La soluzione che ho postato di seguito è una risposta più affidabile perché ricalcola automaticamente il ridimensionamento del browser. Dovresti eseguire js costantemente e monitorare gli eventi di ridimensionamento per gestirlo con JS. Spero possa aiutare.

---

Invece di utilizzare javascript, è possibile utilizzare CSS invece?

Impostare student a display:inline. Quindi impostare parent su white-space:nowrap. Non si avvolgeranno. Quindi devi gestire lo spazio bianco tra le immagini. Dato che ora li abbiamo impostati su inline, qualsiasi spazio bianco nel html causa uno spazio vuoto. Quindi, se si imposta `font-size: 0px 'sul contenitore dell'immagine, il divario crolla. Ricordarsi di impostare il font su un valore positivo se i contenitori devono contenere testo. Non è necessario scherzare con js.

http://jsfiddle.net/U3gBG/8/

body { 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
} 

html, body { 
    height: 100%; 
} 


.classroom { 
    white-space: nowrap; 
    height: 100%; 
    font-size: 0px; 
} 

.classroom .student { 
    height: 100%; 
    display: inline; 
} 

.classroom .student .student-image { 
    height: 100%; 
}​ 

Answer 2

quando guardo questo IE9 sotto la schermata di debug ho ispezionato i tuoi elementi e di immagine elementi div e sembra la larghezza della prima immagine è 999,95 e NON un numero così sono la altre due immagini aventi ciascuna un valore di larghezza non intero.

sembra essere che alcuni browser arrotonda questo numero e alcuni lo arrotolano verso il basso, quindi puoi usare il css come suggerito nell'altra risposta oppure puoi semplicemente aggiungere il pixel di +1 come fai tu o puoi usare la funzione parseint() o una sorta di funzione di arrotondamento per assicurarti che le tue immagini abbiano abbastanza spazio nel div padre.

EDIT:

Credo che il problema deriva dal valore css di height: 100%, questo Menas che la larghezza viene calcolato e non fissato alla dimensione effettiva dell'immagine, quindi il valore non intero di larghezza in pixel, così in Per continuare a utilizzare questo metodo di immissione delle immagini, è necessario utilizzare math.ceil() o qualcosa di simile quando si sommano la larghezza totale del div principale.

Answer 3

u possibile utilizzare ul li

<ul style="float:left; List-style:none;"> 
<li><img src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/f.AmzRdUdc4pEtCuGvU03WXQ.jpg"></li> 
<li> <img src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/k.jXX55KhHUWZGTAb-GpPkdg.jpg"></li> 
<li> <img src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/c.ZKQXc2Kc8-po-OK6AhDbtw.jpg"></li> 
    </ul> 

e Fix le dimensioni dell'immagine

Answer 4

li sciolse in 3 classi, invece di dover andare attraverso una catena il modo in cui li avete. Invece di avere

.classroom { 
    white-space: nowrap; 
    height: 100%; 
} 

.classroom .student { 
    height: 100%; 
    display: inline-block; 
    float: left; 
} 

.classroom .student .student-image { 
    height: 100%; 
}​ 

semplicemente farli

.classroom { 
    white-space: nowrap; 
    height: 100%; 
} 

.student { 
    height: 100%; 
    display: inline-block; 
    float: left; 
} 

.student-image { 
    height: 100%; 
}​ 

in modo da avere ognuno definito .... ora per quanto riguarda il problema che stai ricevendo, è perché tu non sia sufficientemente specifico nel tuo CSS con il modo in cui vuoi che le cose siano, hai ora impostato la larghezza o l'altezza, hai solo i float impostati sull'elemento studente, quindi è facile che faccia cose strane. Provare qualcosa di simile ..

.classroom { 
    width:308px; 
    height:100px; 
    float:left; 
    margin-left:0px; 
} 

.student { 
    height:100px; 
    width:100px; 
    margin-left:2px; 
    float: left; 
} 

.student-image { 
    height: 100px; 
    width:100px; 
    float:left; 
}​ 

idk se le specifiche esatte che ho dato sarebbe abbastanza grande per la tua foto, ma solo per mostrare come si dovrebbe provare a ottenere un certo controllo su di loro ... e notare le specifiche che ho dato per la larghezza. l'aula ha una larghezza di 308 pixel, quindi lo studente ha una larghezza di 100 pixel con un margine sinistro di 2 pixel, quindi i frame di 3 studenti ogni 100 pixel di larghezza con margine di 2 pixel su ciascun totale fino a una larghezza di 306 pixel, lasciando 2 pixel al a destra dell'ultimo frame dello studente, quindi tutto sommato ... calcolalo per quanto ampio ne hai bisogno e considerando i margini. Spero che questo aiuti ... :)