Div affiancati con un bel pò di errori

**tabagista** · 15-07-2015, 19:10

Nel tentativo di affiancare dei div ho scritto questo codice, questi div si tengono in piedi per miracolo.
quello che ho ottenuto è stato solo di riuscire ad affiancare i primi 3 div con gli altri due a capo.. togliendo il float:left vanno a finire uno sotto l'altro

codice:

<style>
.gruppo {
    width: 1150px;  margin: 0 auto;display: inline-block;}

</style>



</head>

<body>
<div class="gruppo">
<div style="float:left;width:280px;"><a href="uno.html"><img src="immagine.gif" width="200"  /></a>
<p>testo</p>
</div>

<div style="float:left;  width:30px;  "><img src="separatore.gif" width="30"  /></div>

<div style="float:left;  width:280px;"><a href="due.html"><img src="immagine.gif" width="200"  /></a>
<p>testo</p>
</div>

<div style="float:left;  width:30px;"><img src="separatore.gif" width="30"/></div>

<div style="float:left;  width:280px;"><a href="tre.html"><img src="immagine.gif" width="200"  /></a>
<p>testo</p>
</div>

<div style="float:left;  width:30px;"><img src="separatore.gif" width="30"/></div>

<div style="float:left;  width:280px;"><a href="quattro.html"><img src="immagine.gif" width="200"  /></a>
<p>testo</p>
</div>

<div style="float:left;  width:30px;"><img src="separatore.gif" width="30"/></div>

<div style="float:left;  width:280px;"><a href="cinque.html"><img src="immagine.gif" width="200"  /></a>
<p>testo</p>
</div>


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

**tabagista** · 15-07-2015, 19:28

Provato a riscrivere tutto ma questa volta quando il testo supera la larghezza dell'immagine allarga il div ...

codice:

<style>
div.GRUPPI { float:left; margin-left:30px; }


</style>

</head>

<body>
<div class="GRUPPI">
  <p><img src="IMG.jpg" width="200px"/></p>
  <p>TESTO TESTO TESTO TESTO TESTO TESTO</p>
</div>
<div class="GRUPPI"><img src="IMG.jpg" width="200px"/><p>TESTO TESTO TESTO</p></div>
<div class="GRUPPI"><img src="IMG.jpg" width="200px"/><p>TESTO TESTO TESTO</p></div>
<div class="GRUPPI"><img src="IMG.jpg" width="200px"/> <p>TESTO TESTO TESTO</p></div>
<div class="GRUPPI"><img src="IMG.jpg" width="200px"/><p>TESTO TESTO TESTO</p></div>

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

**tabagista** · 15-07-2015, 19:31

No un attimo sto facendo un casino

**tabagista** · 15-07-2015, 21:38

Tornando sul primo codice postato credo di essere riuscito ad allineare i 5 div con testo sotto immagine senza che il testo scomponga il div in questo modo. Il codice è corretto oppure sta in piedi per miracolo?

codice:

<style>
.contenitore {
    width: 1370px;  margin: 0 auto;}
    
    
.IMGtesto {
     float: left; display: block; width: 250px; text-align:center;}    
     
.fauxDIV {
     float:left; display:block; width:30px;}


</style>
</head>

<body>
<div class="contenitore">
<div class="IMGtesto">

<a href="#.html"><img src="img.jpg"  /></a>
<h3> TESTO TESTO TESTO TESTO TESTOTESTO.TESTO TESTO TESTO TESTO TESTO TESTO TESTO.TESTO TESTO TESTO TESTO TESTO TESTOTESTO.TESTO TESTO TESTO TESTO TESTO TESTO TESTO.TESTO</h3></div>

<div class="fauxDIV"><img src="vuoto.gif" width="30"  /></div>

<div class="IMGtesto"><a href="#"><img src="img.gif"  /></a>
<h3> TESTO TESTO TESTO TESTO TESTOTESTO.TESTO TESTO TESTO TESTO TESTO TESTO TESTO.TESTO TESTO TESTO TESTO TESTO TESTOTESTO.TESTO TESTO TESTO TESTO TESTO TESTO TESTO.TESTO</h3></div>

<div class="fauxDIV"><img src="vuoto.gif" width="30"  /></div>

<div class="IMGtesto"><a href="#"><img src="img.gif"/></a>
<h3> TESTO TESTO TESTO TESTO TESTOTESTO.TESTO TESTO TESTO TESTO TESTO TESTO TESTO.TESTO TESTO TESTO TESTO TESTO TESTOTESTO.TESTO TESTO TESTO TESTO TESTO TESTO TESTO.TESTO</h3></div>

<div class="fauxDIV"><img src="vuoto.gif" width="30"  /></div>

<div class="IMGtesto"><a href="#"><img src="img.gif"   /></a>
<h3> TESTO TESTO TESTO TESTO TESTOTESTO.TESTO TESTO TESTO TESTO TESTO TESTO TESTO.TESTO TESTO TESTO TESTO TESTO TESTOTESTO.TESTO TESTO TESTO TESTO TESTO TESTO TESTO.TESTO</h3></div>

<div class="fauxDIV"><img src="vuoto.gif" width="30"  /></div>

<div class="IMGtesto"><a href="#"><img src="img.gif"  /></a>
<h3> TESTO TESTO TESTO TESTO TESTOTESTO.TESTO TESTO TESTO TESTO TESTO TESTO TESTO.TESTO TESTO TESTO TESTO TESTO TESTOTESTO.TESTO TESTO TESTO TESTO TESTO TESTO TESTO.TESTO</h3></div>

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

**WottaFacca** · 16-07-2015, 09:48

Il codice è corretto, l'unico consiglio che ti do è quello di lavorare con dimensioni minori, non usare 1370px altrimenti molte persone saranno costrette a fare lo scroll orizzontale per leggere le info o comunque per visualizzare il sito completo

**tabagista** · 19-07-2015, 00:12

però quest'ultimo codice che ho scritto ha il problema di non poter essere centrato per il float left

**gnerpo** · 19-07-2015, 13:12

Originariamente inviata da tabagista

però quest'ultimo codice che ho scritto ha il problema di non poter essere centrato per il float left

Se dai una dimensione fissa (più piccola della dimensione orizzontale dello schermo) al contenitore principale, tutto risulterà centrato. Ovviamente la somma di tutte le larghezza dei div che stanno sotto dovrà essere pari alla larghezza del contenitore principale.

**tabagista** · 19-07-2015, 13:47

Se dai una dimensione fissa.....

già provato ma il float left con cui affianco i div in ogni layout fluido fa spostare i div in left.
non c'è un modo più efficace per centrare questi div senza float left? ho provato anche con il margin: 0 ma li ottengo uno sotto l'altro

**WottaFacca** · 20-07-2015, 08:48

Originariamente inviata da tabagista

già provato ma il float left con cui affianco i div in ogni layout fluido fa spostare i div in left.
non c'è un modo più efficace per centrare questi div senza float left? ho provato anche con il margin: 0 ma li ottengo uno sotto l'altro

Giusto per chiarire una cosa, il "float:left;" non centra un bel niente, semplicemente affianca a sinistra.

Per centrare dovrai usare "margin: 0 auto;"

Guardati questo esempio

codice:

 <html>
<head>
    
<style> 

#blocco{
width: 100%;
height: 200px;
background: #000;
}

#centro{

width: 1000px;
height: 200px;
margin: 0 auto;
background: #00ffff;

}

.contenitore{

width: 150px;
height: 200px;
float: left;
margin-left: 10px;
background: #fff;


}
</style>

</head>
<body>

<div id="blocco"> 

<div id="centro">
    
    <div class="contenitore">
    
    </div>

    <div class="contenitore">
    
    </div>
    
    <div class="contenitore">
    
    </div>
    
    <div class="contenitore">
    
    </div>
</div>

</div>
</body>
</html>

Discussione: Div affiancati con un bel pò di errori

Strumenti discussione

Ricerca discussione

Visualizza

Div affiancati con un bel pò di errori

Permessi di invio