Questo sito utilizza cookies, anche di terze parti, per mostrare pubblicità e servizi in linea con il tuo account. Leggi l'informativa sui cookies.
Username: Password: oppure
HTML / CSS - Problema con display: inline-block
Forum - HTML / CSS - Problema con display: inline-block

Avatar
GN (Member)
Guru


Messaggi: 772
Iscritto: 30/04/2011

Segnala al moderatore
Postato alle 15:02
Martedì, 29/07/2014
Salve, ho un piccolo problema con la visualizzazione di tre div in fila. Come da immagine https://www.dropbox.com/s/ekbj0xotprjl8sy/Screenshot_2014-0 ..., l'ultimo dei tre div è sollevato rispetto agli altri mentre io vorrei che fosse allineato. Ho provato a cercare un po' in rete ma non ho trovato soluzione (anche perchè non è facile "spiegare" il problema ai motori di ricerca senza l'immagine). Qualcuno saprebbe spiegarmi perchè si verifica questo fenomeno e come è possibile risolvere? Questo è il mio codice:
HTML:
Codice sorgente - presumibilmente Delphi

  1. <div class="center">
  2.                 <h4>Latest version (<?php echo $lastVer; ?>)</h4>
  3.                 <div class="ui-widget-content downloadWidget">
  4.                         <a href="dl.php?item=main&type=installerBin" class="btn">Installer</a>
  5.                         <div>.exe, Installs UniversalIDE on your computer. Allows you to associate UniversalIDE project files (.uidp) with UniversalIDE and to add desktop and quick launch shortcuts.</div>
  6.                 </div>
  7.                 <div class="ui-widget-content downloadWidget">
  8.                         <a href="dl.php?item=main&type=portableBin" class="btn">Portable</a>
  9.                         <div>.zip, Doesn't need installation, just unzip to a folder and run UniversalIDE.exe. Stores settings in the installation folder; can be put in a USB drive and be carried between more computers.</div>
  10.                 </div>
  11.                 <div class="ui-widget-content downloadWidget">
  12.                         <a href="dl.php?item=main&type=src" class="btn">Source code</a>
  13.                         <div>Browse the code online or clone it through Git (or download as zip archive). The Visual Studio solution has been made with VS Express for Windows Desktop; compatibility with other versions (especially older ones) isn't assured.</div>
  14.                 </div>
  15.         </div>


CSS:
Codice sorgente - presumibilmente Plain Text

  1. .downloadWidget {border-radius: 5px; display: inline-block; width: 250px; height: 250px;}


Grazie ;)

Ultima modifica effettuata da GN il 29/07/2014 alle 15:17


-
PM Quote
Avatar
dnha (Member)
Pro


Messaggi: 137
Iscritto: 24/07/2014

Segnala al moderatore
Postato alle 17:56
Martedì, 29/07/2014


“La principale differenza tra una cosa che potrebbe rompersi e una cosa che non può in alcun modo rompersi è che quando una cosa che non può in alcun modo rompere si rompe, di solito risulta impossibile da riparare.” [Douglas Adams, Praticamente innocuo]
PM Quote
Avatar
pierotofy (Admin)
Guru^2


Messaggi: 6185
Iscritto: 04/12/2003

Segnala al moderatore
Postato alle 18:21
Martedì, 29/07/2014
Potresti pubblicare la pagina da qualche parte e mandarci l'URL?


Seguimi su Twitter: http://www.twitter.com/pierotofy

Fai quello che ti piace, e fallo bene.
PM Quote
Avatar
GN (Member)
Guru


Messaggi: 772
Iscritto: 30/04/2011

Segnala al moderatore
Postato alle 20:20
Martedì, 29/07/2014
@dnha: non riesco a capire bene quell'articolo, dice "layout a 3 colonne" ma poi ne fa uno a 2 colonne di cui una suddivisa ulteriormente in due parti, che non è quello di cui ho bisogno. Ho provato a mettere sia float: left che float: right, ma non ottengo l'effetto desiderato. Grazie comunque

@piero: ok, http://gntheprogrammer.users.sourceforge.net/download.php


-
PM Quote
Avatar
pierotofy (Admin)
Guru^2


Messaggi: 6185
Iscritto: 04/12/2003

Segnala al moderatore
Postato alle 20:32
Martedì, 29/07/2014
Usa inline-table:

Codice sorgente - presumibilmente Plain Text

  1. .downloadWidget {border-radius: 5px; display: inline-table; width: 250px; height: 250px;}



Il sollevamento e' dovuto al fatto l'elemento con inline-block ha dei sotto-elementi.

Un'altro metodo sarebbe quello di usare float.


Seguimi su Twitter: http://www.twitter.com/pierotofy

Fai quello che ti piace, e fallo bene.
PM Quote
Avatar
GN (Member)
Guru


Messaggi: 772
Iscritto: 30/04/2011

Segnala al moderatore
Postato alle 20:49
Martedì, 29/07/2014
Grazie mille ho risolto con inline-table.


-
PM Quote