2009-10-01 3 views
5

Ho un layout simile a questo:disposizione del testo intorno a un div

Header div 
divLeft divRight 
Footer div 

divLeft è un mucchio di testo e divRight è un div con alcune cose in esso. divLeft è molto più lungo e vorrei che il testo fosse avvolto da Divright. in questo momento sta facendo solo due colonne e c'è un sacco di spazio bianco sotto divRight. Aiuto? Grazie!

risposta

9

Inserire divRight all'interno di divLeft e farlo galleggiare.

Prova questo:

CSS

<style type="text/css"> 
#primary, #header, #footer { 
    float: left; 
    width: 100%; 
} 

#secondary { 
    float: right; 
     width: 200px; /* or whatever width you want */ 
} 
</style> 

HTML

<div id="header"> 
</div> 
<div id="primary"> 
    <div id="secondary"> 
     <p>Put your content here that goes on the right</p> 
    </div> 
    <p>Put your content here<br /> 
     that goes on the left<br /> 
     and should wrap under the right-hand column</p> 
</div> 
<div id="footer"> 
</div> 
+0

ah sì mi era di metterlo dentro ... stupido di me, grazie! –

0

si può galleggiare divRight destra. Questo dovrebbe permettere al div sinistro di avvolgere sotto il testo giusto.

Modifica: Avrete anche bisogno di divRight all'interno di divLeft come descritto da Donut.

0

Ho una soluzione molto bella; dare un'occhiata alla fonte dell'esempio here.

0

Luogo divRight all'interno divLeft e dargli queste proprietà:

.divRight { 
    display: inline-block; 
    display: -moz-inline-box; 
    -moz-box-orient: vertical; 
    vertical-align: top; 
    zoom: 1; 
    *display: inline; 
}