Come distribuire gli elementi in modo uniforme all'interno di un div?

devo mettere alcuni elementi in modo uniforme e in modo fluido all'interno di un altro div come deriso di seguito:Come distribuire gli elementi in modo uniforme all'interno di un div?

enter image description here

Ho visto il trucco usando text-align: justify come dato in (https://stackoverflow.com/a/6880421/2159250), ma dato uno o due elementi, viene posto (giustificato) a destra/a sinistra come indicato di seguito: (che non è quello che sto cercando).

enter image description here

Qualsiasi aiuto sarebbe molto apprezzato.

fonte

2014-10-04 Aymer

se non è necessario supportare più vecchio browser, è worty dare un'occhiata un FlexBox: partono da http://css-tricks.com/snippets/css/a- guide-to-flexbox/e https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes –

Sì, non importa <= ie8 – Aymer

sinistra Contenuto allineato assomiglia a questo (una o più i punti rappresentano uno spazio bianco):

+----------------------------------------------+ 
|word.word.word.word       | 
+----------------------------------------------+

(1)text-align: justify non giustifica l'ultima (o l'unica) linea *. Una soluzione semplice è quella di aggiungere un tempo molto lungo parola che può essere inserita solo in una riga a sé stante:

+----------------------------------------------+ |word..........word..........word..........word| |longword_longword_longword_longword_longword_l| +----------------------------------------------+

(2) Si desidera spazio bianco prima della prima e dopo l'ultima parola.Una soluzione semplice è quella di aggiungere fittizi parole per produrre il seguente risultato:

+----------------------------------------------+ |dummy....word....word....word....word....dummy| |longword_longword_longword_longword_longword_l| +----------------------------------------------+

Il risultato desiderato può essere ottenuto mediante l'aggiunta di ulteriori markup. Per esempio:

.row { text-align: justify; } .row:after { display: inline-block; content: ""; width: 100%; } .box { display: inline-block; } .dummy { display: inline-block; } /**** FOR TESTING ****/ .row { margin: 1em 0; background: #FC0; } .box { background: #F0C; width: 4em; height: 5em; } .box:nth-child(even) { background: #0CF; width: 8em; }

<div class="row"> <div class="dummy"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="dummy"></div> </div> <div class="row"> <div class="dummy"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="dummy"></div> </div> <div class="row"> <div class="dummy"></div> <div class="box"></div> <div class="box"></div> <div class="dummy"></div> </div> <div class="row"> <div class="dummy"></div> <div class="box"></div> <div class="dummy"></div> </div>

* text-align-last proprietà potrebbe essere utilizzato in futuro

fonte

2014-10-04 14:55:15

Grazie, ha funzionato. Solo una nota: è importante avere spazio o newline dopo il div dummy (mi ci sono volute un paio d'ore per capirlo. – Aymer

DEMO

ul { 
    margin: 0 auto; 
    width:100%; 
    list-style: none; 
    position:relative; 
    text-align: center; 
    vertical-align: middle; 
} 


ul li { 
    width: 218px; 
    height: 218px; 
    display: inline-block; 
    background:#ccc; 
    margin: 40px; 
    border: 1px solid #d9d9d9; 
    box-shadow: 1px 1px 1px #f2f2f2; 
    position: relative; 
    padding:0px; 
    overflow:hidden; 

}

fonte

2014-10-04 10:57:16 himanshu

Non tutto da solo non lo farà; puoi completare la tua risposta e specificare lo stile richiesto, sull'elemento genitore? E anche allora, come identificato nella domanda, non è necessariamente perfettamente distribuito. –

ok fammi creare un violino – himanshu

Prova questo codice

<html> 
    <head> 
     <title>my page</title> 
     <style type="text/css"> 
      .new{width: 500px; height: 200px; border: 1px solid #333; text-align: center; display: table-cell; vertical-align: middle;} 
      .new div{width: 100px; height: 100px; border: 1px solid #300; display: inline-block;} 
     </style> 
    </head> 
    <body> 
     <div class="new"> 
      <div></div> 
      <div></div> 
      <div></div> 
      <div></div> 
     </div> 
    </body> 
</html>

fonte

2014-10-04 11:11:15 user3074446

Purtroppo questo non distribuirà gli elementi in modo uniforme. Il margine tra questi eleme deve essere lo stesso. – Aymer

sta assumendo questo text-align:justify; sbagliato. in realtà c'è una differenza tra justify e display: inline;. se si guarda il codice della persona a cui è stata accettata la risposta, si scoprirà che ha utilizzato sia la cosa che text-align: justify e display: inline come proprietà di diversi elementi e per scopi diversi.

il luogo in cui ha usato la proprietà text-align:justify; di contenitore che raccontano il contenitore per avere una corretta spaziatura tra il contenuto e lui ha usato display:inline; come la proprietà di tutti i es box per ordinare loro di organizzare in una linea

se si utilizzerà solo display:inline allora sarà visualizzarli solo in linea senza preoccuparsi corretta spaziatura, ma se si definisce text-align:justify; allora ITT andando a cura di corretta spaziatura o forse dovrei dire uguale padding dal confine del contenitore

guarda la differenza tra il codice di questo ragazzo ... in realtà ha aggiunto un sacco di css per fare più attraente, ma ho eliminato tutte le cose solo per spiegare voi:

code senza text-align:justify;:

#container { 
    border: 2px dashed #444; 
    height: 125px; 



    /* just for demo */ 
    min-width: 612px; 
} 

.box1, .box2, .box3, .box4 { 
    width: 150px; 
    height: 125px; 
    vertical-align: top; 
    display: inline-block; 

}

code con text-align:justify;

#container { 
    border: 2px dashed #444; 
    height: 125px; 
    text-align: justify; 


    /* just for demo */ 
    min-width: 612px; 
} 

.box1, .box2, .box3, .box4 { 
    width: 150px; 
    height: 125px; 
    vertical-align: top; 
    display: inline-block; 

}

fonte

2014-10-04 11:57:30 anni

e con questo spero che tu sia ora in grado di capire cosa non sei riuscito a capire ... – anni

Ehi, grazie per il punto, ma prova con due o un elemento. Li colloca nell'estrema destra/sinistra, non in quello che mi aspetto. Ho menzionato il margine b/n elem e (come pure margine b/n border ed elem) dovrebbe essere lo stesso. – Aymer

Questo dovrebbe essere quello che stai cercando. Ti richiede di avvolgere i tuoi elementi riga all'interno di un div "fittizio", ma dovrebbe andare bene.

.row { 
 
    display: table; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    margin-bottom: 10px; 
 
} 
 
.element-wrapper { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
} 
 
.element { 
 
    width: 80%; 
 
    height: 100px; 
 
    margin: auto; 
 
    background: #ccc; 
 
}

<div class="row"> 
 
    <div class="element-wrapper"> 
 
    <div class="element">Toto</div> 
 
    </div> 
 
    <div class="element-wrapper"> 
 
    <div class="element">Titi</div> 
 
    </div> 
 
    <div class="element-wrapper"> 
 
    <div class="element">Tata</div> 
 
    </div> 
 
    <div class="element-wrapper"> 
 
    <div class="element">Tete</div> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="element-wrapper"> 
 
    <div class="element">Toto</div> 
 
    </div> 
 
    <div class="element-wrapper"> 
 
    <div class="element">Titi</div> 
 
    </div> 
 
    <div class="element-wrapper"> 
 
    <div class="element">Tata</div> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="element-wrapper"> 
 
    <div class="element">Toto</div> 
 
    </div> 
 
    <div class="element-wrapper"> 
 
    <div class="element">Titi</div> 
 
    </div> 
 
</div>

fonte

2014-10-04 18:30:32

Come distribuire gli elementi in modo uniforme all'interno di un div?

risposta

Problemi correlati