it-swarm-eu.dev

Posizionamento di due moduli affiancati

Sto cercando di posizionare questi due moduli 1

fianco a fianco. Sono nella stessa posizione e nel giusto ordine. Ho anche creato un nuovo suffisso del modulo per la larghezza dei moduli. Ecco il codice:

 .box.color3 .content {
   clear: none!important;
   float: left;
   width: 50%;
}

.box.color3 .header {
   color: #0090BE;

}

.box.border.color3 {
clear: none!important;
   float: left;
   width: 50%;

}

Inoltre, sto gestendo il sito localmente, quindi non ho potuto fornire il link del sito web.

moduleoverridescsstemplate-overridemodule-display
1
TheAdnan

Se si desidera posizionare due moduli affiancati all'interno di una singola posizione del modulo, è possibile provare quanto segue:

  1. Pubblica ciascuno dei due moduli in posizioni personalizzate (ad esempio "myLeftModule" e "myRightModule").

  2. Aggiungi il seguente CSS al tuo sito per consentire un layout a due colonne (ci sono molti modi per raggiungere questo obiettivo, questo è solo un esempio):

    #wrap {
   width:100%;
   margin:0 auto;
}
#left_col {
    float:left;
   width:50%;
}
#right_col {
   float:right;
   width:50%;
}

  3. Crea un nuovo modulo HTML personalizzato e aggiungi il codice seguente per creare un layout a due colonne:

    <div id="wrap">
    <div id="left_col">
        {loadposition myLeftModule}
    </div>
    <div id="right_col">
        {loadposition myRightModule}
    </div>
</div>

    Il {loadposition ...} tag caricherà i tuoi moduli dalle posizioni indicate e dovrebbero allinearsi bene fianco a fianco.

  4. Prima di salvare il modulo, ricorda di attivare "Prepara contenuto" nel modulo HTML personalizzato per consentire a {loadposition} tag per funzionare: Joomla module Prepare content

0
johanpw

È difficile da dire, senza conoscere l'html della pagina. I CSS che hai fornito non significano nulla da soli.

Quindi alcune cose da considerare:

Anche nel caso in cui il CSS creato sia corretto per allineare a sinistra 2 elementi, ciò non significa che funzionerebbe ovunque.

Può essere che altre regole CSS abbiano la precedenza sulle tue regole, o che tu non stia applicando le tue regole alle classi appropriate - uso sbagliato dei selettori CSS.

Normalmente, dovrai float-left, o display-inline i 2 elementi wrapper del contenuto dei tuoi moduli, che saranno gli elementi figlio all'interno dell'elemento wrapper della posizione del modulo.

A parte il floating, devi assicurarti che le loro larghezze totali inclusi margini, bordi, imbottiture siano al massimo del 100%.

Devi utilizzare l'ispettore del tuo browser per scoprire cosa sta succedendo con il tuo mark-up e CSS.

0
FFrewin

MODIFICARE

Per espandersi su un buon punto da Lodder, questa non è una soluzione ideale se la libreria Bootstrap non è già utilizzata in altri aspetti del sito Web.

Puoi farlo facilmente usando build bootstrap. Innanzitutto, nella parte superiore del file PHP carica la libreria:

 JHtml::_('bootstrap.framework');

Quindi trasforma il tuo HTML in questo modo:

<div>
    <div class="pull-left">
        Content
    </div>
    <div class="pull-right">
         Content
    </div>
    <div class="clearfix"></div>
</div>

Come questo aiuta!

0
Brian Bolli