"border-bottom" su div appare in alto? Div non è avvolgente attorno al testo?

Question

Sto creando una visualizzazione simile a quella dei dati in div. Sto utilizzando un sacco di HTML e CSS incorporati a causa del framework aziendale che sto usando.

Il modo di visualizzarlo: ogni riga ha un contenitore div (rowContainer), e ognuno di una riga è contenuto in un div (collResult). Voglio che l'elemento border-bottom appaia nella parte inferiore del contenitore div. In IE funziona bene, ma in Firefox, i bordi non si avvolgono attorno alle righe, ma appaiono tutti fuori sincrono con i risultati delle righe.

Ecco un esempio del mio codice:

<div class='rowContainer' style='border-bottom: 1px solid #B4B4B4; padding:0; width: 100%; height: auto;'> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>Number 1</div> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>ABCDE</div> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>NAME</div> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>NONE 
</div></div> 

Grazie per qualsiasi aiuto

Answer 1

Questo perché si sono galleggianti div interni, galleggiare il div esterno anche per risolvere questo problema.

Quando si fanno fluttuare gli elementi, l'elemento genitore non si espande all'altezza dei suoi figli a meno che non stia fluttuando da solo, oppure vi sia un altro figlio non mobile. Un'altra soluzione se non è possibile rendere mobile il genitore è aggiungere un elemento dopo i bambini correnti che non galleggia e cancella gli altri elementi. per esempio. aggiungere questo dopo il div interno

<div style="clear:both"></div> 

Answer 2

È necessario cancellare i carri, in modo che il div contenitore si espanderà per la dimensione delle righe.

<div class='rowContainer' style='border-bottom: 1px solid #B4B4B4; padding:0; width: 100%; height: auto;'> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>Number 1</div> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>ABCDE</div> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>NAME</div> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>NONE 
<div class='collClear' style='clear:left;'></div> 
</div></div> 

Answer 3

eliminare la necessità di un div ridondante,

aggiungere questo:

overflow:auto;

a

<div class='rowContainer' style='border-bottom: 1px solid #B4B4B4; padding:0; width: 100%; height: auto;'>

Answer 4

Perché usare DIV se si desidera visualizzare tabellare dati?

I tavoli sono solo per questo! Per rappresentare i dati in modo tabulare ... Non usarlo per il layout, ma usando DIV per il comportamento delle tabelle imitate, IMHO non ha senso

Answer 5

Il modo di ottenere le cose in formato tabellare è di usare span invece di div all'interno il div rowcontainer e l'impostazione display come blocco inline come segue

<div class='rowContainer' style='border-bottom: 1px solid #B4B4B4; padding:0; width: 100%; height: auto;'>    
     <span class='collResult' style='width: 20%;display: inline-block;font: normal 12px Arial;'> 
     Number 1 
     </span> 
     <span class='collResult' style='width: 25%;display: inline-block; font: normal 12px Arial;> 
     Number 1 
     </span> 
     <span class='collResult' style='width: 25%;display: inline-block; font: normal 12px Arial;> 
     Number 1 
     </span> 
     <span class='collResult' style='width: 25%;display: inline-block; font: normal 12px Arial;> 
     Number 1 
     </span> 
</div>