CSS: le scatole div si sovrappongono a vicenda e nascondono il testo.Come "cancellare" loro?
Domanda
Ho un piccolo problema con i miei div scatole che non riesco a risolvere.
Sto creando dinamicamente queste scatole 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>
.
Ogni scatola div è composta come mostrato di un'immagine in alto, quindi il titolo e un breve riassunto del post.Ora, il mio problema è che le scatole si sovrappongono a vicenda ma appena la parte riassuntiva è nascosta sotto l'immagine della scatola div.
Va bene, potrebbe essere un po 'confuso ma il punto della linea è che in qualche modo le scatole non sono separate ma si sovrappongono a vicenda.
My CSS per la scatola div box di Pagelist è:
#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;
}
.
Spero che qualcuno abbia una soluzione o possa indicarmi nella giusta direzione perché ho provato per qualche tempo ora per risolverlo da solo, senza alcuna fortuna.Anche se era solo una questione di usare il Clear: sia il tag , ma non ha fatto nulla.
sincero
- Mestika
Soluzione
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:
Altri suggerimenti
Try removing the positioning and clears, as default <div>
s are block level and should display one under the other.