Come si allineano gli span o div in orizzontale?

88

Il mio unico problema è farli allineare in tre e avere una spaziatura uguale. Apparentemente, gli intervalli non possono avere larghezza e div (e gli intervalli con display: block) non appaiono orizzontalmente uno accanto all'altro. Suggerimenti?

<div style='width:30%; text-align:center; float:left; clear:both;'> È quello che ho adesso.

css html

— Thomas Owens
fonte

2

Perché non vuoi usare un tavolo?

— DOK

63

Perché i dati non sono tabulari.

— Thomas Owens,

10

Le risposte seguenti sono adatte, ma considera che usare una tabella ti darà meno mal di testa se finisci per complicare le cose. Va bene usare un tavolo se ti semplifica il lavoro. Sii pragmatico! :-)

— Rahul

5

seriamente, non usare un tavolo. Questo genere di cose è facile con i CSS.

— Sam Murray-Sutton,

26

"Va bene usare un tavolo se ti semplifica il lavoro." è un consiglio assolutamente terribile . Per favore ignora! :)

— Bobby Jack,

78

Puoi usare i div con l' float: left;attributo che li farà apparire orizzontalmente uno accanto all'altro, ma potresti dover usare la cancellazione dei seguenti elementi per assicurarti che non si sovrappongano.

— jmcd
fonte

17

In realtà, puoi semplicemente impostare overflow: hidden. Vedi: stackoverflow.com/questions/323599/...

— David Wolever

1

Trovo che questo possa rompere il layout nei div successivi. Ad esempio, se uso la tua soluzione e poi provo a padding-leftnel div a destra, viene ignorata.

— Sebastian Mach

2

Non c'è motivo di pensare troppo: <div style="display: in-line"></div><div style="display: in-line"></div>dovrebbe funzionare bene.

— zoltar

l'uso di float introduce un sacco di nuovi problemi. overflow: hiddenè la soluzione migliore.

— saran3h

39

Puoi usare

.floatybox {
     display: inline-block;
     width: 123px;
}

Se hai solo bisogno di supportare i browser che supportano i blocchi in linea. I blocchi in linea possono avere larghezza, ma sono in linea, come gli elementi pulsante.

Oh, e potresti voler aggiungere l'allineamento verticale: in alto sugli elementi per assicurarti che le cose siano allineate

— runeh
fonte

1

l'allineamento verticale non funziona sugli elementi a livello di blocco. In questo caso stiamo parlando di elementi la cui visualizzazione è stata impostata su inline-block.

— runeh

1

inline-block è ora supportato in tutti i browser di livello A tranne IE6 / 7, ma c'è un trucco per far funzionare inline-block in IE6 / 7.

— Alexander Bird

12

La mia risposta:

<style>
 #whatever div {
  display: inline;
  margin: 0 1em 0 1em;
  width: 30%;
}
</style>

<div id="whatever">
 <div>content</div>
 <div>content</div>
 <div>content</div>
</div>

Perché?

Tecnicamente, uno Span è un elemento in linea, tuttavia può avere larghezza, devi solo impostare prima la loro proprietà di visualizzazione per bloccare. Tuttavia, in questo contesto, un div è probabilmente più appropriato, poiché immagino che tu voglia riempire questi div con il contenuto.

Una cosa che sicuramente non vuoi fare è clear:bothimpostare i div. Impostarlo in questo modo significa che il browser non consentirà a nessun elemento di sedersi sulla stessa riga di loro. Il risultato, i tuoi elementi si accumuleranno.

Nota, l'uso di display:inline. Questo si occupa del bug del raddoppio del margine ie6. Potresti affrontarlo in altri modi, se necessario, ad esempio fogli di stile condizionali.

Ho aggiunto un wrapper (# qualunque cosa) perché immagino che questi non saranno gli unici elementi sulla pagina, quindi quasi sicuramente dovrai separarli dagli altri elementi della pagina.

Comunque, spero che sia utile.

— Sam Murray-Sutton
fonte

Questo non sembra funzionare quando l'ho tagliato e incollato in jsfiddle

— Jamie Fristrom

1

Spiacenti, errore di battitura lì; Avrei dovuto mettere un punto e virgola dopo ciascuna di queste righe, quindi funziona; Ho modificato di conseguenza. Sebbene abbia rivisto di nuovo questa domanda, suggerirei che l'OP deve aggiungere un po 'più di codice al suo esempio. Come mostrano le risposte qui, esiste una varietà di approcci che possono essere utilizzati qui e esattamente ciò che si utilizza dipenderà dal contesto.

— Sam Murray-Sutton

4

tu puoi fare:

<div style="float: left;"></div>

o

<div style="display: inline;"></div>

Ognuno farà sì che i div si affianchino orizzontalmente.

— Jeremy B.
fonte

3

Lo farei qualcosa di simile in quanto ti dà 3 colonne di dimensioni uguali, spaziatura uniforme e scale (pari). Nota: non è stato testato, quindi potrebbe essere necessario modificare i browser meno recenti.

<style>
html, body {
    margin: 0;
    padding: 0;
}

.content {
    float: left;
    width: 30%;
    border:none;
}

.rightcontent {
    float: right;
    width: 30%;
    border:none
}

.hspacer {
    width:5%;
    float:left;
}

.clear {
    clear:both;
}
</style>

<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="rightcontent">content</div>
<div class="clear"></div>

— scimmia fare
fonte

2

Io userei:

<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%; 
}
.sidebox { 
float: right;
width: 30%; 
}
<div class="all">
   <div class="maincontent">
       MainContent
   </div>
   <div class="sidebox"> 
       SideboxContent
   </div>
</div>

È la prima volta che uso questo 'strumento di codice' da overflow ... ma dovresti farlo ormai ...

— talevineto
fonte

1

Quello che ti piacerebbe fare è cercare layout basati su griglia CSS. Questo metodo di layout implica la specifica di alcune classi CSS per allineare il contenuto della pagina a una struttura a griglia. È più strettamente correlato al layout print-bs rispetto al web-based, ma è una tecnica utilizzata su molti siti Web per disporre il contenuto in una struttura senza dover ricorrere a tabelle.

Prova questo per i principianti da Smashing Magazine.

— marcus.greasly
fonte

0

Guarda la proprietà css Float. http://w3schools.com/css/pr_class_float.asp

Funziona con elementi di blocco come div. In alternativa, cosa stai cercando di mostrare, le tabelle non sono cattive se stai davvero cercando di mostrare una tabella di alcune informazioni.

— Nick
fonte

Ma non è un tavolo. Sono solo tre cose che voglio che appaiano l'una accanto all'altra.

— Thomas Owens,

404 pagina non trovata

— Ali Yousefi

0

Proverei a dare loro tutti gli display: block;attributi e l'utilizzo float: left;.

Puoi quindi impostare widthe / o heightcome preferisci. Puoi anche specificare alcune regole di allineamento verticale.

— d1rk
fonte

0

    <!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>

<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>

un altro ... prova a usare float: left;o right;, cambia il widthper altri valori ... dovrebbe funzionare ... nota anche che il 10% che non è usato dal div è tra loro ... scusa per il cattivo inglese :)

— talevineto
fonte