ti-enxame.com

Colocando dois módulos lado a lado

Estou tentando colocar esses dois módulos 1

lado a lado. Eles estão na mesma posição e na ordem correta. Eu também criei um novo sufixo para a largura dos módulos. Aqui está o código:

 .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%;

}

Além disso, estou executando o site localmente, para não poder fornecer o link do site.

1
TheAdnan

Se você deseja colocar dois módulos lado a lado em uma única posição, tente o seguinte:

  1. Publique cada um dos dois módulos em posições personalizadas (por exemplo, "myLeftModule" e "myRightModule").
  2. Adicione o seguinte CSS ao seu site para permitir um layout de duas colunas (existem várias maneiras de conseguir isso, este é apenas um exemplo):

    #wrap {
       width:100%;
       margin:0 auto;
    }
    #left_col {
        float:left;
       width:50%;
    }
    #right_col {
       float:right;
       width:50%;
    }
    
  3. Crie um novo módulo HTML personalizado e adicione o seguinte código para criar um layout de duas colunas:

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

    O {loadposition ...} tag carregará seus módulos a partir das posições especificadas e eles deverão se alinhar bem lado a lado.

  4. Antes de salvar seu módulo, lembre-se de ativar "Preparar conteúdo" no seu módulo HTML personalizado para permitir que o {loadposition} tag para trabalhar: Joomla module Prepare content

0
johanpw

É difícil dizer, sem conhecer o html da página. O css que você forneceu não significa nada por si só.

Então, algumas coisas a considerar:

Mesmo que o css que você criou seja adequado para alinhar à esquerda 2 elementos, isso não significa que funcionaria em qualquer lugar.

Pode ser que outras regras css tenham precedência sobre suas regras ou que você não as aplique às classes apropriadas - uso incorreto de seletores de css.

Normalmente, você precisará flutuar para a esquerda ou exibir em linha os 2 elementos do invólucro do conteúdo dos seus módulos, que devem ser os elementos filhos dentro do elemento do invólucro da posição do módulo.

Além da flutuação, você precisa garantir que suas larguras totais, incluindo margens, bordas e forros, sejam no máximo 100%.

Você precisa usar o inspetor do navegador para descobrir o que está acontecendo com sua marcação e css.

0
FFrewin

EDITAR

Para expandir um bom ponto de vista de Lodder, essa não é uma solução ideal se a biblioteca Bootstrap já não estiver sendo usada em outras facetas do site).

Você pode fazer isso facilmente usando a biblioteca integrada bootstrap. Primeiro, na parte superior do PHP carrega a biblioteca:

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

Em seguida, gire o seu HTML da seguinte maneira:

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

Como isso ajuda!

0
Brian Bolli