'border-bottom' sur div apparaît en haut? Div n'est pas enrouler autour du texte?

Question

Je crée une vue de type table des données dans divs. Je dois utiliser beaucoup de HTML et CSS en ligne en raison du cadre d'entreprise que j'utilise. La manière de le visualiser: chaque ligne a un conteneur div (rowContainer), et chaque ligne est contenue dans un div (collResult). Je veux que l'élément border-bottom apparaisse au bas du conteneur div. Dans IE, cela fonctionne très bien, mais dans Firefox, les bordures ne sont pas enroulées autour des lignes, à la place elles semblent toutes désynchronisées par rapport aux résultats des lignes.

Voici un exemple de mon code:

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

Merci pour toute aide

Answer 1

Ceci est parce que vous flottez les divs internes, le flotteur div externe aussi pour résoudre ce problème.

Lorsque vous faites flotter des éléments, l'élément parent ne se développe pas jusqu'à la hauteur de ses enfants à moins qu'il ne flotte lui-même ou qu'il existe un autre enfant non flottant. Une autre solution si vous ne pouvez pas faire flotter le parent est d'ajouter un élément après que les enfants actuels ne flottent pas et efface les autres éléments. par exemple. ajoutez ceci après les divs internes

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

Answer 2

Vous devez effacer les flottants, de sorte que div divisera la taille des lignes.

<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

Retirez la nécessité d'une div redondante,

ajouter ceci:

overflow:auto;

à

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

Answer 4

Pourquoi utiliser DIVs si vous souhaitez afficher sous forme de tableau Les données?

Les tableaux sont juste pour ça! Pour représenter les données sous forme tabulaire ... Ne pas utiliser pour la disposition, mais en utilisant DIVs pour le comportement des tableaux, IMHO n'a pas de sens

Answer 5

La façon d'obtenir les choses sous forme de tableau est d'utiliser span au lieu de div à l'intérieur Le div rowcontainer et l'affichage de paramètre comme inline-block comme suit

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