CSS: Les boîtes div se chevauchent et masquent le texte.Comment "les effacer"?

https://stackoverflow.com/questions/5027151

14-11-2019
|

Question

J'ai un petit problème avec mes boîtes divisées que je ne peux pas sembler résoudre.

Je crée de manière dynamique ces boîtes div:

<div id="pagelist">
<div class="pagelist_img"><img src="images/default.gif"></div>
<div class="pagelist_h1">HEADLINE</a></div>
div class="pagelist_excerpt">SUMMARY</div>
</div>

Chaque boîte div consiste comme indiqué sur une image en haut, puis le titre et un bref résumé de la poste.Maintenant, mon problème est que les cases se chevauchent mutuellement mais juste suffisamment de sorte que la partie résumé est cachée sous l'image de la boîte div en dessous.

D'accord, cela pourrait être un peu déroutant, mais le point de la ligne est que d'une manière ou d'une autre, les boîtes ne sont pas séparées mais se chevauchent mutuellement.

Mon CSS pour la boîte de division pagéliste est:

#pagelist{
    float: left;
    width: 280px;
    margin: 0 40px 20px 0;
    position: relative;
    height: 100px;

}

.pagelist_h1 {
    font-size: 1.8em;
    font-weight: bold;
}

.pagelist_img{
    clear:both;
    top: 0px;
    position: relative;
}

.pagelist_excerpt, .pagelist_excerpt p {
    font-size: 1em;
    color: #000000;
    clear:both;
}

J'espère que certains ont une solution ou peuvent me signaler dans la bonne direction parce que j'ai essayé depuis quelque temps de le résoudre moi-même, sans aucune chance.Je ne fais qu'une question d'utilisation de la touche , mais cela n'a rien fait.

- Mestika

La solution

Use a clearfix. Something along the lines of:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    zoom: 1;     /* triggers hasLayout */
}

And modify your markup to be

<div id="pagelist" class="clearfix">

http://www.positioniseverything.net/easyclearing.html

Also, see the dupes:

Autres conseils

Try removing the positioning and clears, as default <div>s are block level and should display one under the other.

Made an example with your code.

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow