'border-bottom' en div aparece en la parte superior? Div no está envolviendo el texto?

Question

Estoy creando una vista como tabla de datos en divs. Tengo que usar una gran cantidad de HTML y CSS en línea debido al framework empresarial que estoy usando.

La manera de visualizarlo: cada fila tiene un contenedor div (rowContainer), y cada una de ellas está contenida en un div (collResult). Quiero que el elemento de borde inferior aparezca en la parte inferior del contenedor div. En IE, esto está funcionando bien, pero en Firefox, los bordes no se envuelven alrededor de las filas, sino que parecen no estar sincronizados con los resultados de la fila.

Aquí es un ejemplo de mi código:

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

Gracias por cualquier ayuda

Answer 1

Esto se debe a que está flotando los divs interiores, flotar el div exterior también para solucionar este problema.

Cuando se flotan elementos, el elemento principal no se expande a la altura de sus hijos a menos que esté flotando por sí mismo, o hay otro elemento secundario no flotante. Otra solución si no puede hacer flotar al elemento primario es agregar un elemento después del elemento secundario actual que no flote y borre los otros elementos. p.ej. añadir esto después de los divs interiores

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

Answer 2

Es necesario borrar los flotadores, por lo que el div que contiene se expandirá al tamaño de filas.

<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

eliminar la necesidad de un div redundante,

añadir lo siguiente:

overflow:auto;

a

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

Answer 4

Por qué DIVs utilizar si desea mostrar tabular ¿datos?

¡Las tablas son solo para esto! Para representar datos en forma tabular ... No lo use para el diseño, pero usar DIV para el comportamiento de tablas mímicas, en mi humilde opinión no tiene sentido

Answer 5

La forma de obtener cosas en formato tabular es usar span en lugar de div dentro el rowcontainer div y la configuración se muestran como en línea bloque de la siguiente manera

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