Le contenu dans les divs flottants provoque une baisse de div ci-dessous

Je montre des publications WordPress horizontalement en utilisant des divs flottantes. Je l'ai bien fonctionné, mais quand les divs se déplacent vers une nouvelle ligne, si le texte du paragraphe à l'intérieur de chaque div flottant est trop long, le div immédiatement en dessous le laisse tomber. De plus, chaque div flottant est affecté par la longueur des divs au-dessus. Comment puis-je les faire circuler naturellement sans être affecté par la hauteur de ceux qui les surplombent?Le contenu dans les divs flottants provoque une baisse de div ci-dessous

Voici mon code HTML pour un seul flotta div:

<div class="entry_column> 
    <div class="entry"> 
     <h2>Entry title</h2> 
     <p>Entry excerpt...if this text gets too long, the div immediately 
below it gets pushed WAY down</p> 
     </div> 
    </div> 
    <br class="clearFloat" />

Et voici les classes CSS pertinentes:

.entry_column { 
     float: left; width: 50%; 
    } 

     .entry_column .entry { 
      margin-right: 25px; 
    } 

.clearFloat { 
    clear: both; 
    height:0; 
    font-size: 1px; 
    line-height: 0px; 
}

J'ai essayé tout ce que je pouvais penser pour la compensation, mais si je essayer d'ajouter la compensation directement sur les divs flottants, je ne peux toujours pas l'obtenir pour arrêter de tomber.

Espérons que l'image explique un peu mieux ce problème. La boîte "More Music" descend tout droit à cause de la longueur du div "Music Post Stand" au dessus.

Source

2010-01-10 orbit82

Quels styles avez-vous appliqués à la partie musique? À partir de l'image, il semblerait que ce soit réglé pour effacer les flottants, ce qui pourrait être à l'origine du problème. Avez-vous un lien vers une page de test qui montre ce qui se passe? – NerdStarGamer

Plus la musique utilise le même style que les autres. C'est dans la même boîte flottante. Malheureusement, je n'ai pas de page de test en ligne, car je la développe sur mon ordinateur local en utilisant MAMP. Je vais voir si je peux le faire bouger en ligne demain. – orbit82

donc au cœur de votre problème est que « ce va juste ... Post Test » devrait être contre l'extrême gauche, sous la rubrique « Un stand de poste de musique »? Essayez d'inclure le < br class = "clearFloat"/> seulement à la fin d'une rangée de entry_columns, donc dans la capture d'écran, vous l'incluez seulement entre "Another fun post" et "This is Just To To ... post test »

<html> 
<head> 
<title>Test</title> 
<style type="text/css"> 
<!-- 
.entry_column { 
    float: left; width: 100px; 
} 

    .entry_column .entry { 
     margin-right: 25px; 
} 

.clearFloat { 
    clear: both; 
    height:0; 
    font-size: 1px; 
    line-height: 0px; 
} 
--> 
</style> 
</head> 
<body> 
    <div class="entry_column"> 
    <div class="entry"> 
     <h2>Entry title</h2> 
     <p> 
      Entry excerpt...if this text gets too long, the div immediately below it gets pushed WAY down. 
      Repeated to make it long: 
      Entry excerpt...if this text gets too long, the div immediately below it gets pushed WAY down 
     </p> 
     </div> 
    </div> 
    <div class="entry_column"> 
    <div class="entry"> 
     <h2>Entry title</h2> 
     <p>Entry excerpt...</p> 
     </div> 
    </div> 
    <br class="clearFloat" /> 
    <div class="entry_column"> 
    <div class="entry"> 
     <h2>Entry title</h2> 
     <p>New row of Entries</p> 
     </div> 
    </div> 
    <div class="entry_column"> 
    <div class="entry"> 
     <h2>Entry title</h2> 
     <p>Entry excerpt...</p> 
     </div> 
    </div> 
    <br class="clearFloat" /> 
</body> 
</html>

(... à quel point vous devriez plutôt retirer le < br/> et affecter ces entry_columns qui sont au début d'une ligne d'une classe supplémentaire, et cibler cette classe une règle CSS lui donnant la propriété 'clear: both;'.)

Source

2010-01-10 06:18:54 Richard

Oui, c'est le cœur du problème, et votre exemple HTML fonctionne bien. Le seul problème est que je ne sais pas comment y parvenir avec la boucle WordPress ... comme dans, comment ajouter le
au début de chaque ligne dynamiquement? – orbit82

Je ne connais pas WordPress ... pourriez-vous inclure un exemple de la "boucle WordPress"? – Richard

Je l'ai eu de travail, passé un peu de temps à tripoter avec le PHP. Merci beaucoup pour votre aide, Richard. Le problème est survenu parce que j'ajoutais un flottant à la fin de chaque élément, quand le flotteur devait être à la fin de chaque rangée, comme dans votre exemple. Merci encore et si vous habitiez près de chez moi, je vous achèterais un verre! :-) – orbit82

Il ressemble à là est une erreur de syntaxe. Vous avez oublié de fermer l'attribut class:

<div class="entry_column>

Source

2010-01-10 08:27:39 ambiguousmouse

-1

Si vous ne pouvez pas ajouter des éléments que vous pouvez essayer d'utiliser un CSS 3 sélecteur nième enfant à dire « clairement tous les 5 entry_column. (Pour les lignes 5 entrées larges)

.entry_column:nth-child(5n+0)

http://www.w3.org/TR/2009/PR-css3-selectors-20091215/#nth-child-pseudo

Il pourrait bien ne pas être aussi multi-navigateur convivial que vous avez besoin.

Source

2010-01-11 14:53:53

Le contenu dans les divs flottants provoque une baisse de div ci-dessous

Répondre

Questions connexes